Question

我在页面中有很多图片divs。如何将所有这些图像调整为特定大小（缩略图大小）？目前所有图像都显示其原始大尺寸。有没有办法调整这些divs图像的大小而不更改divs内的图像标记，最好使用CSS？

<div class="ItemLeft">


  <div class="Clipping">        
    <a class="ImageLink" href="/videos/id8" title="galaxy">
      <img class="ItemImage" src="/Images/video8.jpg" alt="video 8" />
      <img class="OverlayIcon" src="/Images/1.png" alt="" />
    </a>
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a>
  </div>

  <div class="Title"><a href="/videos/id8" title="galaxy">galaxy</a></div>

  <div class="VideoAge">1 daybefore</div>

  <div class="PlaysInfo"> broadcast 265</div>

</div>

Answer 1

也许你正在寻找这样的东西：

<style type="text/css">
    .ImageLink img {
        width: 50px;
        height: 50px;
    }
</style>

Answer 2

您可以简单地更改CSS文件中ImageLink或ItemImage类的css。

像这样的东西

.ImageLink{height: 100px; width: 50px}
.ItemImage{height: 100px; width: 50px}

这应该将它们全部设置为相同的高度和宽度。

Answer 3

执行此操作的最佳方法是使img代码覆盖div的100％。

<强> CSS

.Clipping {
  width: 300px; //your width
  height: 200px; //your height
  overflow: hidden;
}
.ImageItem {
  width: auto; //or 100%. Auto is to keep aspect ratio
  height: 100%;
}

这种方法是我在我的网站上使用的方法，因为它对响应式设计很灵活。不使用div的px值，而是使用百分比来获得灵活性。

Answer 4

最好的方法是，保持img标签的通用样式（这将适用于所有图像），您可以设置div或span的大小。图像将根据您的div或跨度大小进行调整。

img {max-width: 100%;height: auto;}

如何将所有div图像调整为特定大小？

4 个答案: