javascript - 如何使用 CSS 动态调整图像以调整浏览器窗口的大小

Question

所以我希望我的图像在页面上是一个“固定高度”。即 500px。但是在调整浏览器窗口大小时，我希望图像自动调整(我猜是通过放大和缩小)，所以它保持比例而不是模糊。

我有这个:

.homepageheaderbox
{
height: 470px; 
width: 100%; 
margin-top:0%; 
padding-left: 0; 
width: 100%; 
margin-bottom: 0; 
margin-right: 0;
}
.homepageheaderbox img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

<div class="homepageheaderbox"><img style="margin-top:0%; 
padding-left: 0; 
max-width: 100%; 
height: auto; 
margin-bottom: 0; 
margin-right: 0;" 
src="../Images/Homepage/RyanTeachesHome1.jpg"></div>

我知道这里有一些不必要的代码，我还在研究它。

目前，图像会随着浏览器大小的调整而动态调整，但页面上的图像高度也会发生变化。为了更清楚地看到我的目标是什么，请访问:http://ryanteaches.com/ (<-- 我的目标)并将其与 http://ryanteaches.com/newindex.html 并排放置然后重新调整。您可以直观地看到差异。

干杯!

Answer 1

抱歉，这不是评论(仍然不是 50 个代表)， 我可以推荐你看看 Tutorial W3School 关于响应式图像的教程。或者另一种解决方案是在 CSS Tutorial 中使用 @media 查询.希望对您有所帮助!