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

  • Z时代
  • 2024-02-06
  • 分类：IT

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

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

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

回答：

这样试试看：

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

回答：

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

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

回答：

<div style="width:50%;height: 30vh;">
    <img src="/seller/templates/img/bg_logo_left.jpg" 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; 使用。

以上是 请问大家，一个图片宽高自适应的问题，谢谢大家？ 的全部内容， 来源链接： utcz.com/p/934257.html

回到顶部