时间戳

首页 > 解决方案 > 防止图像增加 div 大小？

html - 防止图像增加 div 大小？

问题描述

我在左边有一张图片，在右边有文字。我希望 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>

标签： htmlcsstailwind-css

解决方案

你是在使用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">

推荐阅读