HTML5 图像未与相同的 css 正确对齐

Posted 2023-03-05

【中文标题】HTML5 图像未与相同的 css 正确对齐

【英文标题】：HTML5 images not aligning correctly with same css

【发布时间】：2015-09-14 11:57:08

【问题描述】：

我正在尝试对齐两个 div 中的两个图像。这是两张图片，它们的大小、分辨率相同，并且在 Photoshop 中对齐非常完美：

但是当我像这样在 index.html 中引用它们时：

<!-- Intro Header -->
<div class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>ssss</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-------acerca---------->

<div id="acerca" class="acerca">
    <div class="acerca-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Acerca de Cssss</h2>
                </div>
            </div>
        </div>
    </div>
</div>

使用完全相同的 css 类：

.intro 
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;


.intro .intro-body 
    display: table-cell;
    vertical-align: middle;


.intro .intro-body .brand-heading 
    font-size: 40px;


.intro .intro-body .intro-text 
    font-size: 18px;



.acerca 
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
     background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;


.acerca .acerca-body 
    display: table-cell;
    vertical-align: middle;


.acerca .acerca-body .brand-heading 
    font-size: 40px;


.acerca .acerca-body .acerca-text 
    font-size: 18px;

并且图像没有对齐，正如您在这张图片中看到的那样：

由于缺少声望点，我无法发布图片，这只是我的第二个问题。

有人知道如何对齐它们吗？谢谢。

JSfiddle：https://jsfiddle.net/uyo35tuf/

【问题讨论】：

把这个放在 jsfiddle 上并提供一个链接以便我们提供帮助:)

你能在 CSS 中发布正确的图片 URL 吗？它将帮助我们更好地检查。

@ManojKumar 完成......谢谢！

@LloanAlas jsfiddle.net/uyo35tuf

您是否尝试过使用background-position: center;？

【参考方案1】：

看起来你想要使用

background-size: 100% 100%;

封面不一样

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

cover 这个关键字指定背景图片应该是 缩放到尽可能小，同时确保其尺寸 大于或等于相应尺寸的 背景定位区域。

我找到了一个非常有用的解释： http://blog.vjeux.com/2013/image/css-container-and-cover.html

而且你不需要前缀 http://shouldiprefix.com/#background-image-options

我也向你提出一个解决方案：

CSS

html, body
    height:100%;
    padding:0;
    margin:0;

body
    display:flex;
    flex-direction: column;


.intro, .acerca
    flex:1;
    width: 100%;
    color: #fff; 

    display: flex;
    align-items: center;
    justify-content: center;


.intro 
    background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat 0 0;
    background-size: 100% 100%;


.acerca 
    background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat 0 0;
    background-size: 100% 100%;


h1 
    font-size: 40px;


h2 
    font-size: 18px;

HTML

<div class="intro">
        <h1>ssss</h1>
</div>

<div id="acerca" class="acerca">
       <h2>Acerca de Cssss</h2>
</div>

这里有一个带有正确前缀的示例。 http://jsfiddle.net/luarmr/y33yc91z/2/

【讨论】：

谢谢你解决了全窗口模式下的问题，但是在调整屏幕大小时会发生这种情况：i.imgur.com/4EGTr0m.png?1@Raúl Martín

@MarianaHernandez 另请查看我的答案，您需要使用视口高度而不是 auto 以防止出现调整大小问题。

在你的情况下，我建议你只使用一张图片，或者只水平固定。在这个设计中，看起来可能只使用一张图片。

最好使用单张图片。

@RaúlMartín 谢谢我会努力的

【参考方案2】：

在 Raul 的建议的帮助下，我玩弄了代码并根据需要得到了输出。 100% 100% 将使图像按原样呈现并响应。

还将height: auto 替换为height: 50vh。它告诉浏览器占据视口高度的 50%。因此，它为两个 div 制作了 100vh。

.intro 
  display: table;
  width: 100%;
  height: 50vh;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://i.imgur.com/jDhQ6PP.jpg?1) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;

.intro .intro-body 
  display: table-cell;
  vertical-align: middle;

.intro .intro-body .brand-heading 
  font-size: 40px;

.intro .intro-body .intro-text 
  font-size: 18px;

.acerca 
  display: table;
  width: 100%;
  height: 50vh;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background: url(http://i.imgur.com/raMFNcc.png?1) no-repeat bottom center scroll;
  background-color: #000;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;

.acerca .acerca-body 
  display: table-cell;
  vertical-align: middle;

.acerca .acerca-body .brand-heading 
  font-size: 40px;

.acerca .acerca-body .acerca-text 
  font-size: 18px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Intro Header -->
<div class="intro">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h2>ssss</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-------acerca---------->

<div id="acerca" class="acerca">
    <div class="acerca-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>Acerca de Cssss</h2>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

它变得更好了，但仍然调整大小不同i.imgur.com/ICqCzq4.png?1

你为两个 div 都设置了 50vh 吗？

在这里完美运行。也许还有其他干扰代码？

粘贴代码时效果很好，但是当我尝试在 div 中添加元素时，我遇到了同样的问题。我添加了一个 和一些图片

请创建新代码的JSfiddle。改为使用单个图像。