在CSS中自動調整圖像大小

Question

如何自動調整圖像大小，如果將寬度和長度更改為自動，它將無法顯示任何圖像。 調整瀏覽器大小時，圖像會與文本重疊，因此，我想將圖像大小更改為動態。

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/

Answer 1

我一直在和你的小提琴打交道，並在這里提出了一個潛在的解決方案-FIDDLE 。

1. 使您的圖片方形，並在代碼中將其作為圖片放置。
2. 將圖片放在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>

Answer 2

使用此CSS調整BG圖片的大小：

jsfiddle.net/YCtDr/

背景大小：100％100％；

更多信息

   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