Question

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

提前致谢

Answer 1

我会尝试将图像放在容器内，容器具有100％的宽度和高度，在30px的左侧和底部有填充，并且其内部的图像也具有100％的宽度和高度。

EG

<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％而不是宽度和高度，如果你想让图像保持自然大小，除非窗口小于它..

Answer 2

我希望将最小宽度和最小高度设置为30px，相对宽度和hiehgt为50％，或者你想要达到这种效果的相对大小

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

抱歉在那里误读了你的问题，一个边界？还是保证金？所以像是

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

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

图像使用浏览器调整大小

2 个答案: