如何用原生HTML&CSS让图片适配Div？解决md尺寸下图片留白

问题背景 #

在Nuxt2+Vuetify的v-html渲染场景中，md尺寸屏幕下img元素下方出现留白，尝试添加pa-0类无法消除；且v-html所在区域默认带有margin-bottom:12px的CSS属性，仅能通过原生HTML和Vuetify语法解决。

解决方案 #

图片底部留白本质是img作为行内元素，默认与文字基线对齐产生的间隙，结合Vuetify工具类可通过以下方式解决：

• 给img添加d-block类，将其转为块级元素，直接消除行内元素的基线间隙
• 或给img添加align-bottom类，强制图片与容器底部对齐，也能清除间隙
• 针对v-html区域的默认margin-bottom，给图片所在的col容器添加mb-0类，覆盖原有边距

修改后的代码 #

<div class="py-6 pa-0">
  <div class="row no-gutters align-center" style="background-color: #f6f6f6">
    <div class="col-md-6 col-12 order-md-1 order-2 px-4 mb-1">
      <h1 class="display-1 py-8">Main Property</h1>
      <div class="align-center d-flex justify-space-between mb-1">
        <h5>Water</h5>
        <div class="mb-1"><small>And more</small></div>
      </div>
    </div>
    <div class="col-md-6 col-12 order-md-2 order-1 mb-0">
      <img class="mx-auto d-block" src="https://images.unsplash.com/photo-1668277280345-f3949c1b6aa2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" lazy-src="https://images.unsplash.com/photo-1674707735136-3d3a8720397e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80"
        alt="test" />
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者MonLes