图片保持固定宽高比

HTML:
 class="image-container">
   src="xxx.png">

CSS:p.image-container {  width: 100%;  height: 0;  padding-bottom: 60%;  overflow: hidden;}p.image-container img {  width: 100%;}
块级元素(如div,p)的padding设置为百分比的时候,是按照容器的宽度来定的,那么我们可以按照图片的比例来设置容器的高度(使用padding-top/padding-bottom),图片则使用绝对定位显示在容器的下层

你可能感兴趣的:(图片保持固定宽高比)