自動調整圖像以適合比例，但不舒展

我想調整基於屏幕尺寸的圖像，但我不希望這樣的圖像超過其實際工作時的像素屏幕太大。到目前爲止，我成功地做到這自動調整圖像以適合比例，但不舒展

<div align="center" style="position:static; height: 100%; width: 100%; top:0;left 0;"> 
<img src="myImg.png" style="width: 80%"> 
</div>

這保持我想要的比例，但是當屏幕太大，也拉伸了圖像。我不想那樣。

來源

2015-06-05 ThanosFisherman

的響應圖像的CSS如下：

max-width: 100%; 
    height: auto;

這將使圖像縮小與它的容器的大小，不超過該圖像的自然寬度。但是，使用width: 100%;將強制圖像與其容器一樣寬，無論圖像的實際大小如何。

其他一些注意事項：

align="center"已被棄用。你應該使用CSS來對齊內容，所以text-align: center;。
使用position: static;是不必要的，因爲它是用於位置屬性的默認值。我唯一能想到的地方就是你需要重寫一些其他的css。
除非你是絕對定位你的div（你不是），那麼top: 0; left: 0;什麼都不會做。

沒有看到你的代碼的其餘部分，我想這將是你試圖完成什麼是最好的解決辦法：

<div style="text-align: center;"> 
     <img src="myImg.png" style="max-width: 100%; height: auto;" alt="FYI, image alt text is required" /> 
    </div>

來源

2015-06-05 15:42:00 ns1234

如果您還設置了max-width屬性，它會限制圖像可以是多大得到。像這樣：

<div align="center" style="position:static; height: 100%; width: 100%; top:0;left 0;"> 
    <img src="myImg.png" style="width: 80%; max-width: 300px;"> 
</div>

可以使這個max-width任何你想要的大小，只要不超過圖像的實際寬度。高度也可以。

來源

2015-06-05 15:29:26

-7

class="img-thumbnail"

可能是解決方案。

來源

2017-05-29 08:06:10 mumukulux

現在「img-fluid」在Bootstrap 4中 – Eduardo

自動調整圖像以適合比例，但不舒展

回答

相關問題