css图片不配高度只配宽度，高度就会自动等比显示吗？

html-css078

css图片不配高度只配宽度，高度就会自动等比显示吗？,第1张

默认情况下，图片只需要设置宽度，高度就会自动等比例调整，同理，只设置高度，宽度也会自动等比例调整，如果同时设置宽度和高度，那么就要自己计算好宽高比例，否则的话图片就有可能会发生变形。因此通常情况下宽度和高度只需要设置其中一项即可。

以上描述不适用于除图片外的其他元素。

这个没有特别的做要求，你要根据你自己的页面整体布局来设置，还有根据div的特性来设置，div默认情况是宽度最大化(100%)、高度最小化，高度随着内容自动伸展；

一般情况做网页的话，大部分都是固定了总体框架宽度的，每个模块的宽度基本上也都是固定的，所以div需要设一下宽度，如果内容也是相对固定不变的，那么也可以设定高度

我现在是做系统软件的界面设计，需要软件的界面能够根据分辨率或者浏览器的宽度自动伸展，所以我一般布局的话大部分地方都是不设宽度的，最多设置一下最小宽度，防止总体框架的宽度过小导致布局的错位，而高度方面因为数据调用的问题会有数据多和数据少的时候，这样内容部分我就不会设定高度

我这里只是大概的给你说一下而已，事情是没有绝对的，你自己多多练习就能够了解了

解决这个问题的方法如下：

1、先在html里添加一个img图片标签。

2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。

3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。

4、设置后，看下页面可以看到图片现在变形了。

5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。

6、这里设置后的效果，图片并没有变形。

7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。