当浏览器宽度减小时，减小图像宽度

decrease image width when browser width decrease

本文关键字：图像 小时 浏览器      更新时间：2023-09-26

我的网页左边有一个图像，右边有一个固定宽度的内容区域，这是一个问题。当我在浏览器上减小宽度时，我会减小图像的宽度，但不会使其变小。我会从左边剪下来。

我该怎么做？

在图像的css中添加以下内容将达到的效果

.image-left-of-content{
   background-size : contain;
}

嗨，这里我给你举一个例子，你让左div占容器的20%，img在左div的100%内，所以如果你调整页面大小，这应该可以

html

<div class="container">
       <div class="left">
          <img src="...your image src"/>
       </div>
       <div class="right">
         content
       </div>
    </div>

css

.container{width: 400px;}
.left{width: 20%;}
.left img{width: 100%;}

如果我正确理解你的问题，我建议你应该设置图像和内容区域的百分比宽度。

请参阅此示例http://jsfiddle.net/0z063thv/

相关文章：