在 css 和 html 中响应的左右图像答案

【问题标题】：Left and right image responsive in css and html在 css 和 html 中响应的左右图像
【发布时间】：2019-03-27 07:00:25
【问题描述】：

我正在构建一个登陆页面，中间有固定的左右图像和内容。在桌面视图中它工作正常，但在移动视图中，图像与内容重叠。我该如何解决这个问题？

    <div class="container">
        <div class="row">
            <div class="col-sm col-lg mt-5 mb-5">
                <div class="text-center">
                    <img src="images/me.svg" class="img-fluid" style="width: 200px">
                </div>
                <div class="text-center" style="  font-family: 'CustomFont',SceneStd-Light;    color: #969595;">
                        UAE’s largest online plant store launching soon in 
                </div>
            </div>
        </div>
        <div class="row pb-5">
            <div class="col-sm text-center">
                <img src="images/bahrain.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
            <div class="col-sm text-center">
                <img src="images/saudi.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
            <div class="col-sm text-center">
                <img src="images/kuwait.svg"  style="height: 150px">
                <div class="text-center pb-2 pt-2"><span>Bahrain</span></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm col-lg mt-5 mb-5">
                <div class="text-center">
                    <a href="#"><img src="images/ae.svg" class="img-fluid" style="width: 200px"></a>
                </div>
                <div class="text-center">
                    <a href="#"><img src="images/uae.svg" style="height: 150px"></a>
                </div>
                <div class="text-center pb-2 pt-2"><span>Visit our UAE store</span></div>
            </div>
        </div>
    </div>
    <div class="right">
    <a href="#">    <img src="images/right.png" class="img-responsive layout-image"  ></a>

    </div>

.left{ 

  left: 0;
  width: 150px;
  height: 100%;
  position: absolute;}

.right{
     top: 0px; 
  right: 0;
  /*width: 150px;*/
  height: 100%;
  position: absolute;}
  .layout-image{height: 100%}

在桌面视图中

在移动视图中

如何在手机和平板电脑视图中解决此问题。

【问题讨论】：

你使用引导程序吗？如果是，是什么版本？
使用@media selectors developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… 我会添加left:100px 到.left 和right:100px 到.right
@Roy 如果 OP 使用引导程序更好地使用引导程序类...
添加 z-index 使其在这些图像上。
@anusha 您必须减小图像的宽度、高度大小并应用 z-index。如果你能提供sn -p 将有助于解决问题

标签： javascript php html css laravel

【解决方案1】：

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index -->

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

有多种方法可以做到这一点，在我的@bpolar 中提到你可以使用 z-index。另一种方法是使用媒体选择器，它允许您为不同的屏幕尺寸拥有不同的 css 属性

例子：

@media (min-width:1281) {
    image {
        width:200px;
    }
}
@media (max-width:1280) {
    image {
        width:100px;
    }
}

此代码将为不同的显示宽度显示不同大小的图像，您可以将它们视为 if 语句。这种方法的好处是您可以更好地控制它在不同显示配置上的显示方式。话虽如此，我认为最好的选择是两者的结合。

如果您需要有关 z-index 的更多信息，请访问 here

我希望这就是你要找的。p>

祝你好运。

【讨论】：

【解决方案2】：

在这些图像上设置 Z-index。诀窍是内容需要比图像更高的位置。

例子：

.img_class {z-index: -1}

【讨论】：

有人请帮帮我

【解决方案3】：

如果您在 .left 和 .right 类的 z-index 之后分配 !important 关键字，然后在 .container 类上显式设置更高的 z-index，它似乎可以正常工作。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>plantshop.me</title>
        <link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
        <style>
            .left{ 
                z-index: -1!important;
                left: 0;
                width: 150px;
                height: 100%;
                position: fixed;
            }

            .right{
                z-index: -1!important;
                top: 0px; 
                right: 0;
                /*width: 150px;*/
                height: 100%;
                position: fixed;
            }

            .layout-image{
                height: 100%
            }

            .container{
                z-index:2!important;
            }

        </style>
    </head>
    <body>

        <div class="left"><img src="images/left.png" class="img-responsive layout-image" ></div>

        <div class='container'>
            <div class='row'>
                <div class='col-sm col-lg mt-5 mb-5'>
                    <div class='text-center'>
                        <img src='images/me.svg' class='img-fluid' style='width: 200px'>
                    </div>
                    <div class='text-center' style='font-family:'CustomFont',SceneStd-Light; color: #969595;'>
                        UAE’s largest online plant store launching soon in 
                    </div>
                </div>
            </div>
            <div class='row pb-5'>
                <div class='col-sm text-center'>
                    <img src='images/bahrain.svg'  style='height: 150px'>
                    <div class='text-center pb-2 pt-2'><span>Bahrain</span></div>
                </div>
                <div class='col-sm text-center'>
                    <img src='images/saudi.svg'  style='height: 150px'>
                    <div class='text-center pb-2 pt-2'><span>Bahrain</span></div>
                </div>
                <div class='col-sm text-center'>
                    <img src='images/kuwait.svg'  style='height: 150px'>
                    <div class='text-center pb-2 pt-2'><span>Bahrain</span></div>
                </div>
            </div>
            <div class='row'>
                <div class='col-sm col-lg mt-5 mb-5'>
                    <div class='text-center'>
                        <a href='#'><img src='images/ae.svg' class='img-fluid' style='width: 200px'></a>
                    </div>
                    <div class='text-center'>
                        <a href='#'><img src='images/uae.svg' style='height: 150px'></a>
                    </div>
                    <div class='text-center pb-2 pt-2'><span>Visit our UAE store</span></div>
                </div>
            </div>
        </div>

        <div class='right'><a href="https://plantshop.ae/"> <img src="images/right.png" class="img-responsive layout-image" /></a></div>


    </body>
</html>

【讨论】：

【解决方案4】：

尝试在移动视图中将 z-index（如 behrain 图像的 z-index:9999 和叶 z-index）增加到 9。

【讨论】：