时间戳

首页 > 解决方案 > div 在景观中从父级中生长出来

html - div 在景观中从父级中生长出来

问题描述

我有一个相当复杂的布局，我正在研究它的响应性。我想我已经找到了移动响应的最佳点，但是当我将方向更改为横向时，图像超出了我为容器设置的最大宽度。问题是，我不认为我的图像反应不灵敏，我希望它如此。这是我想要实现的布局这是一张图片。

黑色方块是宽高比为 1:1 的图像，白色背景是我为我的英雄设置的背景。我正在使用尾风...

这是我的代码：

<div class="hero h-screen w-screen">
    <div class="container w-full h-full mx-auto flex flex-col items-center overflow-hidden">
        <div class="bg-black relative flex flex-row items-center justify-center">
            <img src="blacksquare.webp" class="img w-full h-auto block relative"/>

            <h1 className="heading font-black text-white text-center absolute">
                My awesome text
            </h1>
            <div className="blue-square-overlay w-11/12 rounded-xl bg-black h-1/5 absolute bottom-0 shadow-2xl border-2 border-gray-200"></div>
        </div>
    </div>
</div>



.hero {
  background-image: url("herobgimage.webp");
  max-height: 896px;
}

.bg {
  background-image: url("blacksquare.webp"); /*visible*/
  background-size: contain;
  background-repeat: no-repeat;
  max-height: 896px;
}

.img {
  visibility: hidden;
  max-height: 896px;
}

由于我的设置方式，它在大屏幕和移动肖像上看起来不错，但是当我切换到横向时，我的图像（黑色方块）超出了白色区域，超过了我为该部分设置的最大尺寸。我希望它按比例缩小并放入其中。

我也不确定我是否会以最好的方式去做。但是如何使响应能力更好呢？谢谢你。

（文字应该以正方形为中心，但我的 Gimp 技能很烂。我很抱歉。）

标签： htmlcsstailwind-css

解决方案

推荐阅读