在CSS中自動調整圖像大小

如何自動調整圖像的大小，如果將寬度和長度更改爲自動，則將無法顯示任何圖像。當我重新調整瀏覽器的大小時，我的圖片會重疊文字，因此我想將我的圖片大小更改爲動態。在CSS中自動調整圖像大小

HTML源

<div class="span2"> 
    <ul class="nav user_menu pull-left"> 
    <div class="round-pic1" style="background-image: url('http://asianwiki.com/images/a/a4/Andy-lau.jpg');"></div> 
    </ul> 
</div>

CSS

.round-pic1 { 
display: block; 
width: 170px; 
height: 170px; 
margin: 0em auto; 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center center; 
border-radius: 99em; 
-webkit-border-radius: 99em; 
-moz-border-radius: 99em; 
border: 0px solid gray; 
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); 
}

的jsfiddle

http://jsfiddle.net/9JVHq/

來源

2014-04-04 Jien Wai

div的'高度：auto'意味着它的高度是根據它裏面的內容。在你的代碼中，裏面沒有東西，所以高度是0px。而不是使用div，請嘗試。 – kenicky

它在'img'中工作，但是當我嘗試調整我的瀏覽器圖像時將變成橢圓形。 –

我想你需要使用'max-width'和'max-height'。 – kenicky

我一直在玩弄你的小提琴，並在這裏想出了一個可能的解決方案 - FIDDLE。

使您的照片呈正方形，並將其作爲圖像放入代碼中。
將圖像放在div中，並給div一個最小寬度和最大寬度。

它允許圖像縮小到100px，保持相同的縱橫比。讓我知道如果這就是你要找的。

CSS

.holder { 
    min-width: 100px; 
    max-width: 300px; 
}

HTML

<div class='holder'> 
    <img class="round-pic1" src='http://offsite2.seriousshops.com/53/11/11635/11635_main_400x400.jpg'/> 
</div>

來源

2014-04-04 04:48:04 TimSPQR

使用這個CSS來調整背景圖片：

jsfiddle.net/YCtDr/

背景尺寸：100 ％100％;

MOre info

If you want to preserve aspect ratio, there are two more possibilities. 

    1. background-size: cover; - the background image is completely 
     covering the element (image can be cut off) 

    2.background-size: contain; - the image is streched without cutting it

來源

2014-04-04 05:10:26

在CSS中自動調整圖像大小

回答

相關問題