当前位置: 首页 > 知识库问答 >
问题:

javascript - 请问大家,一个图片宽高自适应的问题,谢谢大家?

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



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

共有3个答案

归誉
2023-05-12
<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; 使用。

壤驷兴朝
2023-05-12

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


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

隆礼骞
2023-05-12

这样试试看:

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