如何将图片放入div中
关于这个问题，让我想到了将大象放进冰箱要几步，图片放进div看起来也就是如下3步。
- 创建div
- 在div中创建img
- img中填入src
但是，看起来就是这么简单，可是最主要的事情是，如何使得图片自适应div呢？
这个问题估计每个写前端的人都碰到过，虽然解决的方法有很多，但是不同的使用场景就得用不同的方法解决。
为此我在此给出自己的解决方法。
场景与解决方法
1.在固定大小的div中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<div class="box">
<img src="https://images.pexels.com/photos/27202978/pexels-photo-27202978.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load"
alt="" class="image">
</div>
</template>
<style scoped>
.box {
height: 300px;
width: 600px;
background-color: aqua;
}
.image {
max-width: 100%;
max-height: 100%;
}
</style>
|
这种场景最简单，直接限制图片宽高最大为100%即可。
2.由flex展开嵌套的div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <template>
<div class="container">
<div class="box box0">
<div class="box2">
<img src="https://images.pexels.com/photos/27202978/pexels-photo-27202978.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load"
alt="" class="image">
</div>
</div>
<div class="box box1">
</div>
</div>
</template>
<style scoped>
.container {
height: 300px;
width: 600px;
display: flex;
}
.box {
flex: 1;
}
.box0 {
background-color: aqua;
}
.box1 {
background-color: red;
}
.box2 {
width: 100%;
height: 100%;
}
.image {
max-width: 100%;
max-height: 100%;
}
</style>
|
原理：将未设置大小的box0中的box2手动撑开，再限制图片大小。
3.特殊情况
获得div高度，再设置图片大小（不推荐）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
const imgDiv = ref<HTMLElement | null>(null)
let width = ref()
let height = ref()
onMounted(() => {
if (imgDiv.value) {
width.value = imgDiv.value.offsetWidth
height.value = imgDiv.value.offsetHeight
}
})
</script>
<template>
<div ref="imgDiv" class="imag">
<图片组件名
:style="{width: Width + 'px',height: Height + 'px'}"
src=""
/>
</div>
</template>
<style>
:deep(.image .样式名或组件名){
object-fit: contain;
}
</style>
|
这样子将失去图片的动态宽高所以不推荐使用，只是用于说明一种解决方法，虽然可以通过监听事件重新设置大小，但将使得代码繁琐。
原理：不管是什么样子的图片组件，基本都是div套img实现的，所以在浏览器打开开发者工具看结构理来设置样式即可。
利用绝对定位使得图片基于div设置宽高
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <template>
<div class="container">
<div class="box box0">
<div class="box2">
<img src="https://images.pexels.com/photos/27202978/pexels-photo-27202978.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load"
alt="" class="image">
</div>
</div>
<div class="box box1">
</div>
</div>
</template>
<style scoped>
.container {
height: 300px;
width: 600px;
display: flex;
}
.box {
flex: 1;
}
.box1 {
background-color: red;
}
.box2 {
background-color: aqua;
width: 100%;
height: 100%;
position: relative;
}
.image {
max-width: 100%;
max-height: 100%;
position: absolute;
}
</style>
|
原理：通过绝对定位将图片脱离文档流，显示到div上面。
思考
是否有其它解决方法
将图片设置为div背景
这个方法确实也可以，不过我认为例如头像或者展示图之类的设置为背景，有点脱离语义化。但是在某些场景中还是挺实用的，例如WEB小游戏中设置为div背景时，不会被用户所拖拽到。
关于object-fit
这个属性通常是在img中使用，并**搭配宽高设置100%**，不过在我检查时发现，图片将会撑满整个容器，若是有缩放时会出现留白。
虽然看着没问题，不过留白的部分实际上也是图片的一部分，如果给图片设置鼠标移入时的动作，那么当鼠标看着还没到图片上时，就会触发动作。
所以我基本不使用它来使得图片自适应。
如何使得图片居中
这个其实很简单，不管是定位的方式实现居中还是弹性布局的方式实现居中，又或者其它居中的方法都可以。
所以我就不说明了，会用开发者工具，就能解决很多问题。
