请问大家，一个图片宽高自适应的问题，谢谢大家？

Question

<div style="width:50%">
  <img src="/seller/templates/img/bg_logo_left.png" alt="">
</div>
请问我怎么只设置高度呢？让图片自适应呢？ 图片的宽度远超50%的宽度

我现在这里的图片 处理 总是失真

Answer 1

这样试试看：

<div style="width:50%">
  <img src="/seller/templates/img/bg_logo_left.png" alt="" style="width: auto; height: 100%;">
</div>

Answer 2

一般来说我会使用CSS背景图（background-image）的形式，配合 background-size:cover 就能实现。
如果像OP你这样按照案例改变的，也可以使用 <img> 标签固定宽高 + 搭配 object-fit: cover; 来实现。

---

当然如果你想要做缩放的效果的话，可以用下面的方式来实现：
Codepen Demo

Answer 3

<div style="width:50%;height: 30vh;">
    <img src="/seller/templates/img/bg_logo_left.png" style="width: auto;height: 100%;vertical-align: middle;" alt="">
</div>

img 所在容器父元素，高度设置为你需要的高度，这里设置为 30vh；
img 宽度设置为 auto; 高度为 100%.设置vertical-align: middle;是为了避免可能出现的留白问题。

按照你截图的位置，为了图片的展示效果， img 还可以配合 object-fit: contain; 或者 object-fit: cover; 使用。