防止图像增加 div 大小？答案

【问题标题】：Prevent image from increasing div size?防止图像增加 div 大小？
【发布时间】：2021-11-30 17:21:38
【问题描述】：

我在左侧有一张图片，在右侧有文字。我希望 div 的高度由右侧的文本（长度）确定，并相应地裁剪左侧的图像。

但是，我的 div 目前同时满足这两个 div 的需求。如果图像垂直较长，它将增加而不是裁剪。我怎样才能防止这种情况发生？

我唯一能想到的就是设置一个准确的高度，但这并不能很好地响应（在某些屏幕尺寸上图像会太小）

<div class="flex bg-green-500 text-white">
  <div class="overflow-hidden block flex-shrink-0 w-1/3">
    <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
  </div>
  <div class="mx-2 flex flex-col justify-center">
    <h1>Long Title</h1>
    <h2>Some long sub text under the long title. Some long sub text under the long title. Some long sub text under the long title</h2>
  </div>
</div>

【问题讨论】：

相关（如果不重复）-stackoverflow.com/questions/34194042/…
@Paulie_D，使用它不适用于图像......至少从我尝试过的情况来看。你能举个例子吗？

标签： html css tailwind-css

【解决方案1】：

您是使用cdn 获得顺风，还是安装它？如果已安装，您可以将背景添加到 tailwind.config.js，例如：

module.exports = {
  theme: {
      extend: {
        backgroundImage: {
          'image' : "url('https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80')"
        }
    }
  }
}

然后您可以将其添加为背景图像，例如：

<div class="bg-image flex-shrink-0 w-1/3">

【讨论】：