在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则不会。

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