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

发布网友发布时间：2022-05-10 09:22

我来回答

共3个回答

热心网友时间：2022-04-20 13:08

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

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

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

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

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

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

7、最后输出结果如图。

热心网友时间：2022-04-20 14:26

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

热心网友时间：2022-04-20 16:01

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