如何將所有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圖像調整爲特定大小？

回答

相關問題