Question

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

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

Answer 1

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

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

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

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

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

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

7、最后输出结果如图。

Answer 2

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

追问

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

追答

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

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

追问

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

追答

那就用背景是最好的，

这样就行了

Answer 3

首先看图片高度多少， 然后用一个标签定义宽高度并把图片设置为这个标签的背景 坐标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;