当浏览器宽度减少时减少图像宽度

我的网页有一个图像在左边，内容区域在右边，并且宽度固定。当我减少浏览器的宽度时，我会减小图像的宽度，但不会变小。我会从左侧切割它。当浏览器宽度减少时减少图像宽度

我该怎么做？

2014-10-02 Mats

显示您的标记和CSS。这是一个'img'元素还是背景图片？ – Danield 2014-10-02 11:23:53

我不想调整图像大小，我将拥有相同的高度，并使宽度更小，但从左侧剪切图像，使可见区域更小。 – Mats 2014-10-02 12:24:41

添加以下图像的CSS会做的伎俩

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

来源

2014-10-02 11:23:52

喜在这里，我给你举个例子，你做的。左格容器的20％和左格的100％内的IMG，所以，如果你调整页面这应该工作

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%;}

来源

2014-10-02 11:25:55 Jozsi

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

见这个例子中的http：//jsfiddle.net/0z063thv/

来源

2014-10-02 11:32:54 Fergoso

当浏览器宽度减少时减少图像宽度

回答

相关问题