當瀏覽器寬度減少時減少圖像寬度

我的網頁有一個圖像在左邊，內容區域在右邊，並且寬度固定。當我減少瀏覽器的寬度時，我會減小圖像的寬度，但不會變小。我會從左側切割它。當瀏覽器寬度減少時減少圖像寬度

我該怎麼做？

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

當瀏覽器寬度減少時減少圖像寬度

回答

相關問題