css 图片高度怎么设置才不会变形,被压缩

html-css023

css 图片高度怎么设置才不会变形,被压缩,第1张

设置图片自适应，给图片设置display:blockwidth:100%不要设置高度，不要设置高度，不要设置高度。这样图片就能根据父级div适应大小，就是你设置一个div，里面放图片。div多大，图片就多大。高度自动适应，所以不能设置高度。

将img的width和height设置成固定值而不是相对值，就不会变形。

当然，若是需要的话你也可以将width和height设置成固定比例，这样虽然图片可以缩放，但是图片不会扭曲变形。

1、首先准备一张设置为背景的图片，这边准备的是一张650px*347px的图片。

2、然后建立一个html文档，将它和背景图片放到一个文件夹中。

3、编辑html文档，这边建立一个div，设置宽度为700px，高度跟背景图一样，为347px。

4、就给div设置背景图片。

5、在浏览器中预览会发现图片平铺了，这不是想要的效果。

6、然后可以给div再加上属性，-moz-background-size:100% 100%background-size:100% 100%。

7、这样设置后就会发现背景图片拉伸至100%了。