01前端/CSS - 相对图片原始大小设置图片大小

  • 更新时间：2020-09-10 04:38
  • 创建时间：2020-09-10 04:38

使用 inline-block 的对内表现为块级盒子，盒子大小会根据内容计算的特性可以实现。（盒子大小还会与包裹它的容器的大小有关）

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
<!DOCTYPE html>

<style>
  .relative-self-img {
    display: inline-block;
  }

  .relative-self-img img {
    width: 10%;
  }

  .box {
    width: 1000px;
    height: 420px;
    border: 3px solid aqua;
  }
</style>

<div class="box">
  <p>外部盒子 1000*420， 图片 600*600 缩放 10%</p>
  <span class="relative-self-img">
    <img
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599750913019&di=bf357ea2036cddb93626ae5645bdcb5c&imgtype=0&src=http%3A%2F%2Fwww.36588.com.cn%3A8080%2FImageResourceMongo%2FUploadedFile%2Fdimension%2Fbig%2F42e0f0df-c653-4357-86f3-df20ee8692b0.png"
      alt=""
    />
  </span>
</div>

参见：https://stackoverflow.com/a/25026615/11949765