html – 使用css中的％调整图像大小

发布时间：2020-12-14 18:35:52 所属栏目：资源来源：网络整理

导读：我正在尝试用尽可能多的东西创建一个使用％的液体网页布局.调整图像大小时,我遇到了碰撞. 都： img src="source" style="width: 20%; height: 20%;"/ 和 .wall_picture_block img{width: 20%; height: 20%;} 不适合高度属性.他们将图像宽度调整为容器的20％,

我正在尝试用尽可能多的东西创建一个使用％的液体网页布局.调整图像大小时,我遇到了碰撞.

都：

<img src="source" style="width: 20%; height: 20%;"/>

和

.wall_picture_block img{
width: 20%; 
height: 20%;
}

不适合高度属性.他们将图像宽度调整为容器的20％,但高度保持相对于图像大小.(我试图制作正方形)

解决方法

图像的高度和宽度属性的百分比与其所包含的容器一起工作.因此,为了实现流体效果,只需尝试放入img周围的容器并给出图像高度和宽度：100％.现在你应该以百分比的形式改变容器的高度和宽度.这是一个例子

<div style="width: 500px; height: 100px;">
   <img src="your-image-link-here" style="height: 100%; width: 100%;">
</div>

这样您的图像将达到500 * 100的高度和宽度.

UPDATE

<div id="wrapper" style="border: 1px solid red; width: 900px; height: 400px;">
  <div id="imgcontainer" style="width: 100%; height: 50%;">
     <img src="ur-img" style="height: 100%; width: 100%;">
  </div>
</div>

包装器和具有百分比的容器的示例.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!