html - 使用浏览器调整图像大小

Question

我想在调整浏览器大小时调整图像大小，但我想在图像左侧和底部保留 30px 的边框。像这样:http://www.jennyvansommers.com/non-commissioned/corner/#347有没有使用 CSS 执行此操作的简单方法？

提前致谢

Answer 1

我会尝试将图像放入容器中，容器具有 100% 的宽度和高度，左侧和底部的填充为 30px，其中的图像也具有 100% 的宽度和高度。

如

<div id="imageWrapper">
  <img src="imageurl" />
</div>

<style> 
    #imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
    #imageWrapper img{width:100%;height:100%;}
</style>

包装应填满窗口，图像应将包装填满至内边距。如果图像的形状与窗口的形状不同，这很可能会拉伸(stretch)您的图像。如果您想保持图像的纵横比，请尝试只设置 img 的宽度或高度，但不要同时设置两者。

希望这有帮助:)

编辑:不确定是否要填满屏幕，如果您希望图像保持其自然大小，请使用 img{max-width:100% 和 img{max-height:100% 而不是宽度和高度，除非窗口小于它..