在Html中设置图片等宽等高,在Html中设置图片等宽等高

在一些页面的编写中，尤其是商城页面，会遇到一些按照规则的方式进行排列图片，为了使美观，图片一般使用正方形的图片为主，接下来就如何在页面内如何设置正方形的图片的方法进行介绍：

方法一，简单直接的，给定图片的宽高样式，设置为固定值，例子采用宽、高300px

这种方式具有一定的局限性，尤其当遇到了图片的宽高无法确定的时候，那就蒙圈了，这不由的出现了第二种方式。

方法二，利用定位以及padding进行设置

html的结构：

CSS的样式：

.img_warp {

width:50%;

margin:0 auto;

}

.img_container{

width:100%;

height:0;

padding-bottom:100%;

over-flow:hidden;

margin:0;

position:relative;

}

.img_container  img{

width:100%;

height:100%;

position:absolute;

}

注意：在包含图片的容器，只能用padding-bottom来设置，不能用padding-top，padding-top会使得图片溢出，而padding-bottom则不会。

如果有其他的更好的解决方案，请大家留言，之后也可以进行更新