无法将流体图像置于流体中Div

我在将流体图像水平居中放置在流体div中时遇到问题。从高低起，其他人找到的解决方案都不适合我，要么我试图做一些太难的事（我怀疑它），或者我正在用不同的媒介工作。无法将流体图像置于流体中Div

HTML：

<body> 
    <div id="BackgroudDiv"> 
    <img src="images/NumberTwo.png" alt="" id="FSBG"/> 
    </div> 
</body>

CSS：

body { 
    margin: 0px 
} 
#FSBG { 
    width: auto; 
    height: 100%; 
    min-width: 1040px; 
    position: absolute; 
    min-height: 585px; 
} 
#BackgroudDiv { 
    width: 100%; 
    height: 1080px; 
    text-align: center; 
    display: block; 
    background-color: #BF2527; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
}

“保证金：汽车” 什么都不做应有尽有的宽度是可变的。在代码中，图像“NumberTwo”的左边缘位于页面的中心。我想让图片的中心居中。它的行为与缩放方式相同，但不在页面中间！

任何帮助将不胜感激，它一直在把我推上墙。让我知道是否需要更多信息。

来源

2015-06-13 HCAWN

你只需要删除position: absolute;在img：

#FSBG { 
    width: auto; 
    height: 100%; 
    min-width: 1040px; 
    min-height: 585px; 
}

DEMO：https://jsfiddle.net/3w5rqg3d/1/

来源

2015-06-13 22:39:15 lmgonzalves

啊我试过了，但后来图像没有遵循我设置的缩放“规则”，将BackgroudDiv更改为100％高度而不是设定的高度使一切正常工作。非常感谢你 – HCAWN

还有一件事，如果你愿意的话：当窗口的纵横比变得太窄时，我希望图像的两边切断，而不是右边（现在正在发生），还有什么可以做到的？ – HCAWN

看看[这个演示]（https://jsfiddle.net/lmgonzalves/3w5rqg3d/3/）使用[这个另一个答案]（http://stackoverflow.com/a/30770629/4908989）的一些代码。 – lmgonzalves

当您使用的位置是绝对的，你需要设置上，左，右为0px;然后您可以添加空白左侧和空白右侧自动。

例 - https://jsfiddle.net/zvbn2fak/

top:0px; 
left:0px; 
right:0px; 
margin-left:auto; 
margin-right:auto;

请注意，这是不使用的图像上的绝对位置时，其并不需要的最佳实践。请阅读lmgonzalves的评论，下面有更好的解决办法。

来源

2015-06-13 22:38:35

lmgonzalves解决方案为我工作，但感谢您花时间回答:) – HCAWN

您可以使用flexbox，但要注意的是Flexbox将不支持旧版浏览器。

#backgroundDiv { 
    display: flex; 
    justify-content: center; 
}

就是这样。 justify-content沿flex的方向对齐flexbox中的项目。我不确定它是否适用于position: absolute项目，但您可以查看它。

备注：为了简明起见，我已经留下了供应商前缀，但您可能必须添加这些前缀才能在各个浏览器中获得所需的效果。

来源

2015-06-13 22:41:10 Achrome

lmgonzalves解决方案为我工作，但感谢您花时间回答:) – HCAWN

无法将流体图像置于流体中Div

回答

相关问题