如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏

Posted 2023-04-14

哦，忘了，上传的这些图片宽度都是一样的，都是580px，但高度不一样，在这里父级元素的宽度是230px，高度是195px，已设置overflow:hidden;

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

2、主要设置两个div，一个div在外一个div在内，并设置div的边框颜色。

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

4、F12打开审查元素，修改内层div的宽度，外层div随着边框。

5、修改内层div高度，外层div高度随之改变。

6、div定位测试。div如果使用了定位position则外层不会随内层div变化。

7、最后输出结果如图。

参考技术A 像你这么说，貌似只有用js来判断了，首先给图片上下左右居中，给父级元素设置overflow:hidden;
然后用过js来获取当前图片的宽高，如果宽度大于高度，那么就高度为100%，宽度自适应，反之宽度100%，高度自适应；追问

我觉得也是，但不会写js代码

追答

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

最好的办法是放置你div差不多大小比例的图片，然后用背景来填充上去，然后给div设置background-size:100% auto，overflow:hidden，这样会好很多

追问

那我上传的图片统一固定宽度呢，高度不定

追答

那就用背景是最好的，

这样就行了

本回答被提问者采纳 参考技术B 首先看图片高度多少， 然后用一个标签定义宽高度并把图片设置为这个标签的背景 坐标x，y为居中
例如：一张图片 1.jpg 高度 100px； 宽度不限

.div
height:100px;
width:100%;
background:url("1.jpg") center center;


<div class="div"></div>
如果想隐藏溢出的部分，可以添加代码overflow:hidden;追问

这样根本不行，那些图片都是从数据库查出来的，只要录入新的图片，就会改变，如何设置背景？而且这些图片大小，宽高都不定的

追答

不好意思，我没看清楚题目。
你这个情况不是设置背景
而是设置这个div（容器）下的img 宽度、高度都是100%再加上隐藏溢出部分的代码。overflow:hidden;

DIV+CSS宽度100% 怎么设置图片不变形，高度自适应

宽度100% 高度min-height 在宽屏幕显示下高度自适应缺隐藏了图片的下半部分。怎么解决宽度100%，图片不变形不隐藏

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

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

2、在index.html中的<style>标签中，输入css代码：body background: url(image123.jpg) no-repeat; background-size: cover;。

3、浏览器运行index.html页面，此时图片既没有变形就能完整显示在网页上了。

参考技术A 你试试看img
width:100%
height;100%
行不行，这个就是自适应父容器的高度和宽度。
父容器必须设置高度值追问

这样banner 宽度不是100%了

追答

你默认的padding，margin去掉没你在最上面加个*
padding:0px;
margin:0px;

看看
*可以换成父元素，id值，CSS值