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

I have many image divs in a page. How do I resize all those images to a specific size (thumbnail size)? Currently all images shows their original big size. Is there a way to resize those divs images without changing the image tags inside those divs, preferably using CSS?

我在页面中有很多图像div。如何将所有这些图像调整为特定大小(缩略图大小)?目前所有图像都显示其原始大尺寸。有没有办法调整这些div图像的大小,而不更改这些div内的图像标签,最好是使用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 个解决方案

#1

You could simply alter the css for either ImageLink or ItemImage classes in your CSS file.

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

Something Like This

像这样的东西

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

This should set them all to the same height and width.

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

#2

Maybe you're looking for something like this:

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

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

#3

The best way to do this is make the img tags span 100% of the div.

执行此操作的最佳方法是使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%;
}

This method is what I use on my websites because it is flexible for responsive design. Instead of using a px value for the div, use percents for flexibility.

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

#4

The best way to do is, keep img tag common style (this will apply for all the images), you can set size for div or span. The image will adjust according to your div or span size.

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

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

#1