1

我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>
4

4 回答 4

1

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

<style type="text/css">
    .ImageLink img {
        width: 50px;
        height: 50px;
    }
</style>
于 2013-03-21T04:20:50.747 回答
1

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

像这样的东西

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

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

于 2013-03-21T04:21:34.530 回答
1

最好的方法是让img标签覆盖 100% 的div.

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%;
}

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

于 2013-03-21T04:33:48.250 回答
0

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

img {max-width: 100%;height: auto;}
于 2013-03-21T04:51:59.960 回答