css 怎么减去图片的高

在网页开发中，我们常常遇到需要让图片自适应高度的情况。而CSS提供了一种非常方便的方法，即使用max-height属性来对图片的高度进行限制。

img {
        max-height: 100%;
        width: auto;
}

通过上面的代码，我们可以让图片的高度最大为父元素的高度。如果父元素没有定义高度，则该图片默认会根据它自己的实际高度来显示。

如果我们希望图片在超出父元素高度时自动进行缩放，可以使用以下代码：

img {
        max-height: 100%;
        width: auto;
        object-fit: contain;
}
    

这里的object-fit属性是CSS3中新增加的一个属性，它可以设置元素的内容如何适应其容器的宽高比。其中，contain表示图片按比例缩放，以适应容器，但不会裁剪图片；而cover表示图片按比例缩放，以填满容器，但会有部分图片被裁剪。

需要注意的是，为了确保这些代码的有效性，我们必须将图片的父容器的高度进行正确的设置。比如，设置一个具有指定高度的div，然后将图片放在其中，如下：

div style="height: 500px;
    ">
        img src="image.jpg">
    /div>
    

这样就会在保持页面的美观和一致性的前提下，让图片自适应其父元素的高度了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！