Question

我有一个比它存在的div大的图像代码，但我需要它居中，所以图像的中间显示在div中，现在它从图像的左边开始并被切割关闭。我不确定代码会以什么为中心。

编辑：解决我的解决方案，谢谢你的帮助

这是代码：

＆＃13;

.about {
    display: inline-block;
    position:relative;
    width:100%;
    overflow-x:hidden;
}
.about-img {
  content:url("//placehold.it/1000x1000");
}

＆＃13;

<div class="about">
    <img class="about-img"/>
</div>
<div><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>

＆＃13;

Answer 1

这可能会帮助您获得图像的静态高度。您可以在about-image类中将高度设置为100vh，以将图像高度设置为整页高度。

＆＃13;

.about {
    display: inline-block;
    position:relative;
    width:100%;
    overflow-x:hidden;
}
.about-img {
  background :url("//placehold.it/1000x1000") no-repeat center center;
  background-size: cover;
  width: 100%;
  // height: 100px; //static height
  // height: 100vh; // full page height
}

＆＃13;

<div class="about">
    <img class="about-img"/>
</div>
<div><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>

＆＃13;

Answer 2

如果您定位图像＆amp;并使它的宽度=容器的100％，它应该工作。当我测试它时工作。

只需按照以下方式定位您的图片：

img {

宽度：100％; }

Answer 3

这将使图像居中。虽然您需要将图像高度设置为某个px以使其看起来整洁。

.about {
    display: inline-block;
    position:relative;
    width:100%;
    overflow-x:hidden;
}
.about-img {
  content:url("//placehold.it/1000x1000");
  display: block;
    margin: auto;
    width: 100%;
    
}

<div class="about">
    <img class="about-img"/>
</div>
<div><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>

Answer 4

我找到了一个使用此代码的解决方案：假设您知道图像高度：

.about {
    background:url(../5678site/images/aboutback.png) no-repeat center top;
    background-size:auto 1216px;
    height: 1217px;
    width:auto;
}

此代码不包含html或css中的img，就像它只是div

一样

无法将超大尺寸的图像与div

4 个答案: