0

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

提前致谢

4

2 回答 2

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>

包装器应该填充窗口，图像应该填充包装器到填充。如果图像的形状与窗口的形状不同，这很可能会拉伸您的图像。如果您想保持图像的纵横比，请尝试仅设置 img 的宽度或高度，但不能同时设置。

希望这可以帮助 ：）

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

于 2012-06-09T13:21:23.227 回答
0

我希望将最小宽度和最小高度设置为 30 像素，相对宽度和高度为 50%，或者您想要的任何相对大小都可以达到这种效果

.image-resize {
  min-hieght:30px;
  min-width:30px;
  height:50%;
  width:50%;
}

抱歉误读了您的问题，边界？还是保证金？有点像

margin-left:30px;
margin-bottom:30px;

而不是高度和宽度，你可以使用border-left和border-bottom我想使用透明边框，但我更喜欢边距。但我认为相对尺寸是你想要的？所以它会随着浏览器调整大小，或者实际上是相对于其父级调整大小，所以取决于它在 dom 中的位置

于 2012-06-09T12:47:30.780 回答