图片不适合。

huangapple
go评论93阅读模式
英文:

Image Doesn't Fit

问题

我尝试制作自定义的Instagram动态，使用HTML和CSS，但是我遇到了关于图片大小的问题。会自动添加外部填充，并且图像无法占据整个单元格。

我正在使用Bootstrap 5。

HTML代码：

  1. <div class="container-fluid" style="padding-left: 5px ; padding-right: 5px;">
  2.       <div class="row">
  3.         <div class="col-lg-3 col-md-3 col-sm-0"></div>
  4.         <div class="col-lg-6 col-md-6 col-sm-12">
  5.           <table class="gallery-table" id="gallery-container">
  6.             <tr>
  7.               <td>
  8.                 <img src="immagini/questionmark.png" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="la-citta-pizza">
  9.               </td>
  10.               <td>
  11.                 <img src="immagini/questionmark.png" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="fondane">
  12.               </td>
  13.               <td>
  14.                 <img src="immagini/esterna1.jpg" alt="" class="gallery-img" data-bs-toggle="modal" data-bs-target="#image-modal" title="la-citta-pizza1">
  15.               </td>
  16.             </tr>
  17.           </table>
  18.         </div>
  19.         <div class="col-lg-3 col-md-3 col-sm-0"></div>
  20.       </div>
  21.     </div>

CSS代码：

  1. .gallery-img {
  2.     aspect-ratio: 1/1;    
  3.     width: 100%;
  4.     height: auto;
  5.     object-fit:cover;
  6. }

如何去除这个填充？

英文:

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:

  1. &lt;div class=&quot;container-fluid&quot; style=&quot;padding-left: 5px ; padding-right: 5px;&quot;&gt;
  2.       &lt;div class=&quot;row&quot;&gt;
  3.         &lt;div class=&quot;col-lg-3 col-md-3 col-sm-0&quot;&gt;&lt;/div&gt;
  4.         &lt;div class=&quot;col-lg-6 col-md-6 col-sm-12&quot;&gt;
  5.           &lt;table class=&quot;gallery-table&quot; id=&quot;gallery-container&quot;&gt;
  6.             &lt;tr&gt;
  7.               &lt;td&gt;
  8.                 &lt;img src=&quot;immagini/questionmark.png&quot; alt=&quot;&quot; class=&quot;gallery-img&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#image-modal&quot; title=&quot;la-citta-pizza&quot;&gt;
  9.               &lt;/td&gt;
  10.               &lt;td&gt;
  11.                 &lt;img src=&quot;immagini/questionmark.png&quot; alt=&quot;&quot; class=&quot;gallery-img&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#image-modal&quot; title=&quot;fondane&quot;&gt;
  12.               &lt;/td&gt;
  13.               &lt;td&gt;
  14.                 &lt;img src=&quot;immagini/esterna1.jpg&quot; alt=&quot;&quot; class=&quot;gallery-img&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#image-modal&quot; title=&quot;la-citta-pizza1&quot;&gt;
  15.               &lt;/td&gt;
  16.             &lt;/tr&gt;
  17.           &lt;/table&gt;
  18.         &lt;/div&gt;
  19.         &lt;div class=&quot;col-lg-3 col-md-3 col-sm-0&quot;&gt;&lt;/div&gt;
  20.       &lt;/div&gt;
  21.     &lt;/div&gt;

My CSS:

  1. .gallery-img {
  2.     aspect-ratio: 1/1;    
  3.     width: 100%;
  4.     height: auto;
  5.     object-fit:cover;
  6. }

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.

huangapple
  • 本文由 发表于 2023年6月12日 17:10:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76455129.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定