Question

我有几个包含图像的div元素，每个图像的高度设置为100％，宽度计算。高度工作正常，但父div具有图像的实际宽度，其大于计算宽度。这会在图像之间产生差距。如何使div显示图像的宽度（而不是文件本身的宽度）？这可以用html / CSS解决吗？

HTML：

<table>
   <tr>
      <td align-"center" valign="middle" style="background:#000;">
         <div class="scrollable"> 
            <div class="items">
               <div>
                  <img style="height:100%;" src="001.png"> 
               </div>
            </div>
         </div>
      </td>
   </tr>
</table>

CSS：

table {
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    border-collapse: collapse; 
    border: 0;
}

td {
    width: 100%; 
    height: 100%; 
    padding: 0; 
    border: 0;
}

.scrollable {
    position: relative; 
    overflow: hidden;
    width: 100%; 
    height: 100%; 
    max-height: 1000px;
}

.scrollable .items {
    width: 25000px; 
    height: 100%; 
    position: absolute;
}

.items {float: center;}

.items div {
    float: left; 
    width: auto;
    padding: 0;
    margin: 0;
}

有什么想法吗？ Tnanks！

Answer 1

是的，只有CSS和HTML才能解决这个问题。您可以使用CSS设置图像的宽度。首先为您的图片元素添加<img id="img1" style="height:100%;" src="001.png">之类的ID，然后使用CSS为图片指定所需的宽度：#img1{ width:150px; }。

或

您可以将父div的宽度设置为图像宽度不能超过的边界宽度，然后在CSS中将图像的宽度设置为width:100%。

编辑：鉴于您的新JSbin：要删除图片之间的黑色空间，只需从每张图片中删除style="height:100%"即可。发生的事情是浏览器略微缩小图像以使它们保持100％的窗口高度，从而产生黑色空间。我希望这有帮助。这是jsBin：http://jsbin.com/kupaqukizu/1/edit?html,css,js,output

Div具有图像的实际宽度而不是计算宽度

1 个答案: