如何使圖像標簽圖像響應迅速而無需媒體查詢，並使布局成為一個屏幕

Question

我想知道有什么方法可以在不使用媒體查詢的情況下調整img標簽圖像的大小。 我進行了搜索並嘗試了所有答案，但對我沒有任何幫助。 當我在Windows系統中看到屏幕時，它會顯示正常的一屏顯示，當我在13英寸的普通屏幕筆記本電腦和Macbook Pro上看到時，它會滾動，當我將鍍鉻的窗口大小減小到75％時，它就適合一屏布局。 我試圖減小字體大小，例如：font-size：2vw;。 它的工作正常，但我嘗試了CSS：

max-width: 100%;
    width: auto\9; /* ie8 */
    height: auto;

不工作。 是否有任何方法或腳本可以在一個屏幕中進行布局並自動調整圖像標簽的大小。 我不想使用媒體查詢

Answer 1

只需添加“寬度：100％”

例如

<img src="http://dummyimage.com/1200x400/000/fff" style="width:100%"/>

如果您正在尋找其他東西。 請編輯問題並添加屏幕截圖。

更新

嘗試這個：

 #images{ max-width:50%; border:1px solid; float:left } #images .image{ float:left; padding:10px; width:25%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} 

 <div id="images"> <div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div> <div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div> <div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div> <div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div> </div> 

希望對你有效。

Answer 2

使圖像響應迅速而無需媒體查詢：

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

 <img src="http://lorempixel.com/400/300" alt=""> 

要使圖像具有響應性並且沒有滾動條：

 html, body { height: 100%; margin: 0; padding: 0; } img { width: 100%; height: 100%; display: block; } 

 <img src="http://lorempixel.com/400/300" alt=""> 

使圖像響應具有約束：

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

 <img src="http://lorempixel.com/400/300" alt=""> 

Answer 3

請在img標簽中添加width：100％和height auto屬性，以使其具有響應性。 例如：

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