英文:
Image Doesn't Fit
问题
我尝试制作自定义的Instagram动态，使用HTML和CSS，但是我遇到了关于图片大小的问题。会自动添加外部填充，并且图像无法占据整个单元格。
我正在使用Bootstrap 5。
HTML代码：
<div class="container-fluid" style="padding-left: 5px ; padding-right: 5px;">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-0"></div>
<div class="col-lg-6 col-md-6 col-sm-12">
<table class="gallery-table" id="gallery-container">
<tr>
<td>
<img src="immagini/questionmark.png" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="la-citta-pizza">
</td>
<td>
<img src="immagini/questionmark.png" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="fondane">
</td>
<td>
<img src="immagini/esterna1.jpg" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="la-citta-pizza1">
</td>
</tr>
</table>
</div>
<div class="col-lg-3 col-md-3 col-sm-0"></div>
</div>
</div>
CSS代码：
.gallery-img {
aspect-ratio: 1/1;
width: 100%;
height: auto;
object-fit:cover;
}
如何去除这个填充？
英文:
I'm trying to make my custom instagram feed with html and css but I have an issue with the images size. An external padding is automatically added and the image doesn't occupy the entire cell.
I'm using bootstrap 5.
My HTML:
<div class="container-fluid" style="padding-left: 5px ; padding-right: 5px;">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-0"></div>
<div class="col-lg-6 col-md-6 col-sm-12">
<table class="gallery-table" id="gallery-container">
<tr>
<td>
<img src="immagini/questionmark.png" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="la-citta-pizza">
</td>
<td>
<img src="immagini/questionmark.png" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="fondane">
</td>
<td>
<img src="immagini/esterna1.jpg" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="la-citta-pizza1">
</td>
</tr>
</table>
</div>
<div class="col-lg-3 col-md-3 col-sm-0"></div>
</div>
</div>
My CSS:
.gallery-img {
aspect-ratio: 1/1;
width: 100%;
height: auto;
object-fit:cover;
}
How I can remove this padding(o?
答案1
得分: 2
去除纵横比，使高度不再依赖于宽度。同时将高度设为100%。
英文:
Remove the aspect ratio so that the height no longer depends on the width. Also make the height 100%.
答案2
得分: 0
将外部div添加相对位置，将内部div添加绝对位置。
英文:
Add position relative to outer and position absolute to inner div's.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论