css图片高度自适应-如何让div中的图片自适应长度和高度，图片不改变形状，可以超出div，超出的部分隐藏

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

标签：

前言：本文由Cha138.com编辑为您整理。 主要介绍如何让div中的图片自适应长度和高度，并且图片不改变形状。 它可以超越div并隐藏部分之外的相关知识，希望对你有一定的参考价值。

哦，我忘了，上传的图片都是一样的长度，580px，但是高度不一样。 这里父元素的长度为230px，高度为195px，并且已经设置了overflow:hidden；

1、html的div标签主要用于布局。 默认情况下，div没有任何属性，这也是它常用于布局的原因。

2、主要设置一外一内两个divcss图片高度自适应，并设置div的边框颜色。

3、先打开页面，如下图所示。

4、F12打开检查元素，修改外层div的长度，外层div跟随边框。

5、修改外层div的高度，外层div的高度变化较大。

6.div定位测试。 如果div使用定位位置，内层不会随着外层div的变化而变化。

7、最终输出结果如图所示。

参考技术A就像你说的，好像只能用js来判断。 首先将图片上下左右居中，并为父元素设置overflow:hidden；

然后用js获取当前图片的宽高。 如果长度小于高度，则高度为100%，宽度自适应。 否则长度为100%，高度自适应；

我也这么认为，但是我不会写js代码

跟进

但是你还是不能这样做，因为如果图片太高或者长度太长，那么你的高度为100%后，宽度会放大很多，只能显示一部分，这样就会也会导致图片模糊

最好的办法是放一张和你的div大小差不多的图片，然后用背景填充，然后给div设置background-size: 100% auto、overflow: hide，这样会好很多

跟进

那么我上传的图片都是统一固定长度，高度是可变的

跟进

那么用背景是最好的，

这样就可以了

本回答中，受访者采用参考技术B，先看图片的高度，然后使用标签定义宽度和高度，并将图片设置为标签的背景坐标x，y居中

例如：图片1.jpg 高度100px； 宽度不限

.div

高度：100px；

宽度：100%；

背景：url("1.jpg") 中心 中心；

如果想隐藏溢出部分，可以添加代码overflow:hidden;

这根本行不通。 这些图片是从数据库中检查的。 只要输入新的图片，它们就会发生变化。 背景如何设置？而且这些图片的大小、宽度和高度都是不固定的。

跟进

抱歉，我没看清标题。

你的情况是没有设置背景

相反，将这个div（容器）下的img的宽度和高度设置为100%加上隐藏溢出的代码。 溢出：隐藏；

DIV+CSS长度100% 如何设置图片保持不变且高度自适应

宽度 100% 高度 min-height 宽屏显示下，高度自适应，图片下半部分隐藏。如何解决长度为100%，图片不变形隐藏的问题

需要准备的材料有：电脑、浏览器、html编辑器。

1. 首先，打开html编辑器，新建一个html文件，例如：index.html。

2、在index.html中的标签中，输入css代码：body background: url(image123.jpg) no-repeat; 背景大小：封面；。

3. 浏览器运行index.html页面。 此时图片没有任何修改，可以完整地显示在网页上。

参考技术A，尝试img

宽度：100%

高度;100%

好的，这就是自适应父容器的高度和长度。

父容器必须设置一个高度值来询问

这样横幅宽度就不是100%

跟进

您的默认填充，边距已删除，而无需在前面添加 *

内边距：0px；

边距：0 像素；

看一看

*可以替换为父元素、id值、CSS值

上面讲的是如何让div中的图片适应长度和高度。 图片的形状没有改变。 它可以超出div并隐藏主要内容。 如果无法解决您的问题，请参考以下文章

CSS3如何固定图片的长度，使图片的高度根据图片的比例自适应？

CSS3如何固定图片的长度css图片高度自适应，使图片的高度根据图片的比例自适应？

DIV+CSS长度100% 如何设置图片保持不变且高度自适应

制作css手机版页面时如何使背景图片适应div的高度和长度

如何适配轮播的高度和宽度

如何利用CSS让图片自适应显示长度