停止圖像屏幕上移動

比方說，我有一個都不同寬度的示例圖像的頁面：停止圖像屏幕上移動

<img src="#" width="650px"> 
<img src="#" width="750px"> 
<img src="#" width="350px">

在瀏覽器的縮放，這些都會打出來的容器，所以我必須在img上設置max-width: 100%;以阻止這種情況的發生。

有沒有一種方法可以讓這些圖像保留其不同的尺寸？目前他們最終成爲移動瀏覽器的全部寬度。

來源

2017-09-01 tbar

告訴我們你結束了什麼...這應該是完美的。 – Salketer

的max-width是好的，只是嘗試OT還添加了height:auto;

例子：（調整窗口的大小，看看效果）

img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg"> 
 
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg"> 
 
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">

來源

2017-09-01 07:00:31

我可以在你的例子中看到這個工作非常好，但是當我測試它時，它不起作用。奇怪的是，謝謝你的回答，我很高興我不會以錯誤的方式解決問題，我會試着弄清楚是什麼原因導致它不能這樣做。 – tbar

如果代碼在'img'上設置，則不檢查檢查元素。 –

添加height: auto;到圖像的CSS

div { 
 
    width: 50%; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div> 
 
    <img src="https://static.wixstatic.com/media/a9ff3b_1eec973ae9eb43f4bca9876e5d90f6fa.jpg"> 
 
</div>

來源

2017-09-01 07:04:05 felixmosh

你需要更多的CSS這裏，如果我目前正在使用移動肖像模式，你會得到所有具有完整寬度的圖像，但在風景上都應該有不同的大小。

在縱向模式下，平均屏幕寬度爲大約320像素，但所有圖像多於320像素。

所以我建議你使用類似「.large」「.medium」和「.small」的圖像，並使用移動/小屏幕的媒體查詢來顯示不同的寬度。

來源

2017-09-01 07:37:37

停止圖像屏幕上移動

回答

相關問題