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。

将图片制作成方块并将其作为图像放入代码中。
将图像放入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 /

background-size：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

在CSS中自动调整图像大小

2 个答案: