[英]what code should i use to automatically resize an image, whenever the browser window is made narrow?
從黑屏開始，假設我有以下HTML代碼：
<body>
<div id="image">
<img src="pic.jpg">
</div>
</body>
和CSS為：
#image{
width:100%;
height:auto;
}
要么
#image img {
width:100%;
height:auto;
}
我在這里感到困惑，因為圖像沒有變化，因為圖像div具有圖像的大小（圖像尺寸為1920 * 1080像素），並且其100％是整個圖像本身。 但是，如果我將寬度設置為50％，仍然沒有變化。
我只想根據瀏覽器調整圖像的大小，我的屏幕分辨率為1366 * 768，因此最初我需要圖像以適合該圖像，當我調整瀏覽器的大小時，我需要圖像的大小相應地進行更改。
設置包含div的大小不會更改圖像的大小。 在圖像上設置樣式：
#image img {
width:100%;
height:auto;
}
演示： http ： //jsfiddle.net/jcJtM/
您是否嘗試過JavaScript？
windowWidth = $(window).width();
windowHeight = $(window).height();
$('img').css({
"width" : windowWidth,
"height" : windowHeight
});
$(window).resize(function(){
windowWidth = $(window).width();
windowHeight = $(window).height();
$('img').css({
"width" : windowWidth,
"height" : windowHeight
});
});
每當我調整編輯器窗口的大小時，如何阻止代碼行自動移到下一行？
[英]How to stop lines of code from automatically shifting to the next line whenever I resize the window of the editor?
當我縮小瀏覽器范圍時，應該如何修改CSS以使圖像更接近文字？
[英]How should I modify my css to make the image getting closer to my text when I narrow the browser?
調整瀏覽器窗口大小時如何自動調整iframe內容大小？
[英]How to automatically resize iframe content size when browser window resize?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.