解决div比里面包含的img图片高度大的问题

如果用div包裹一个img,你会发现div的高度要超过img的高度。
搜集了一下解决方法主要有几种:
1.div设置font-size:0

<div style="font-size:0">
  <img />
</div>

2.div设置display:flex

<div style="display:flex">
  <img />
</div>

3.img设置display:block

<div >
  <img  style="display:block"/>
</div>

相关的原因可以阅读这篇文章:
https://mor10.com/removing-white-space-image-elements-inline-elements-descenders/

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在 jQuery Mobile 中使 `<img>` 元素的大小不占据原图大小的区域,你可以使用 CSS 来控制它的宽度和高度,以及设置 `object-fit` 属性来调整图片在 `<img>` 元素内的显示方式。 首先,请确保你已经引入了 jQuery Mobile 库和 jQuery 库。然后,你可以使用以下代码来实现: HTML: ```html <div data-role="page"> <div data-role="content"> <ul data-role="listview"> <li> <img src="your-image.jpg" class="custom-image" alt="Your Image"> <h2>Text</h2> </li> </ul> </div> </div> ``` CSS: ```css .custom-image { width: 100px; /* 设置图片的宽度 */ height: 100px; /* 设置图片高度 */ object-fit: cover; /* 调整图片在 <img> 内的显示方式,可以使用不同的值来满足需求,比如 contain、fill 等 */ } ``` 在上述示例中,我们使用了 jQuery Mobile 的布局结构,包括 `<div data-role="page">`、`<div data-role="content">` 和 `<ul data-role="listview">`。你可以根据自己的需求进行修改。 然后,我们为 `<img>` 元素添加了一个自定义的类名 `.custom-image`,并在 CSS设置了它的宽度、高度和 `object-fit` 属性。你可以根据需要调整这些值。 `object-fit` 属性用于定义图片在 `<img>` 元素内的显示方式,和之前提到的一样。你可以尝试使用不同的值来满足你的需求。 通过以上代码,你可以在 jQuery Mobile 中实现图片大小不占据原图大小的区域。 希望这能帮助到你!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值