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

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

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

来源

2013-03-21 user1788736

现在你可以用IMG宽度100％http://jsfiddle.net/qdekP/ – 2013-03-21 04:19:21

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

像这样

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

这应该他们都设置为相同的高度和宽度。

来源

2013-03-21 04:21:34 DvideBy0

你也可以，如果你想完全一样的CSS应用到的代码中使用较少的线路都使用joeframbach的例子。 – DvideBy0 2013-03-21 04:23:05

非常感谢大家。 dvide有没有办法在itemImage的中间显示overlayicon图像？怎么样？ – user1788736 2013-03-21 04:35:00

@ user1788736是的，有一种方法。您可以设置z-index http://reference.sitepoint.com/css/z-index，它基本上允许您将某些东西放在顶部或下面的其他位置。 – DvideBy0 2013-03-21 15:29:00

也许您正在寻找这样的事情：

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

来源

2013-03-21 04:20:50

最好的办法是让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%; 
}

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

来源

2013-03-21 04:33:48

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

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

来源

2013-03-21 04:51:59 Vicky

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

回答

相关问题