0

我有几个包含图像的 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;
}

有任何想法吗？坦克！

4

1 回答 1

0

是的，这只能通过 CSS 和 HTML 来解决。您可以使用 CSS 设置图像的宽度。首先给你的图像元素一个 id，<img id="img1" style="height:100%;" src="001.png">然后用 CSS: 给图像所需的宽度#img1{ width:150px; }。

或者

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

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

于 2015-03-29T16:27:37.493 回答