无法在容器内均匀定位图像

Question

Gasim（谢谢）回答了我关于将浮动应用于可调整大小图像的一个问题，但我还有一个问题需要解决。

我有两张图片应用了这个 css 代码...

.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}

@media only screen and (min-width : 1200px) {
.image-container {
    max-width: 500px;
}
}

.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}

@media only screen and (min-width : 1200px) {
.image-container2 {
    max-width: 500px;
}
}

所以现在它们正在正确调整大小并彼此对齐，我无法像下面的示例那样水平放置它们。我已经尝试了我知道如何执行此操作的唯一方法（margin-left: auto，margin-right:auto），但这没有用。填充也不起作用？此代码中是否有某些部分阻止了它们的工作，如果是这样，我需要修复它吗？如果有帮助，请提供任何意见谢谢:)

Answer 1

也许这不是响应式图像的最佳解决方案，但我通常将媒体查询与移动优先方法一起使用，并且效果很好。基本上，默认情况下将框的宽度设置为 100%，在较大的屏幕上，您可以设置所需的宽度：

.image-container {
    float: left;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-color: red; /* for testing */
    height: 250px;
}

@media only screen and (min-width : 1224px) {
    .image-container {
        max-width: 500px;
    }
}

结果如下：http://codepen.io/gasim/pen/xbYQdd

尝试将 window 尺寸变小，您会看到不同之处。测试、调试和修改此代码要简单得多。

编辑：忘了说了。如果你也可以使用 display: inline-block 而不是 floats.

编辑 2：要在容器之间添加填充，您需要将边距添加到特定值，而不是自动。例如：

.image-container {
   /* rest of the values */
   margin: 5px;
}

这将为图像容器的左、右、上、下添加 5 像素的边距。如果你也想让图像容器居中，我会把它们添加到另一个容器中：

<div class="container">
   <div class="image-container" style="background-image: url(URL_HERE);"></div>
   <div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>

并添加样式：

 @media only screen and (min-width: 1224px) {
     .container {
        width: 80%;
        margin: 0 auto;
     }
 }

另外，请查看我添加背景图片的方式，使用样式。它比为每个背景图像编写 CSS 要干净得多。这样你就可以拥有一个 class image-container 并添加尽可能多的背景图像而不依赖 CSS.

无法在容器内均匀定位图像

Trouble with positioning images evenly inside container

html

css

image