响应式图像网格，在 CSS 中具有裁剪和居中的图像答案

【问题标题】：Responsive image grid, with cropped and centered images in CSS响应式图像网格，在 CSS 中具有裁剪和居中的图像
【发布时间】：2017-05-03 04:20:10
【问题描述】：

我正在尝试创建一个具有 3x4 图像网格的响应式网站，其中不同大小的图像被裁剪并在网格框中居中。图像裁剪但我无法在保持纵横比的同时让框做出反应。

网格框目前是固定值大小，因为当我尝试将其设置为 Width:100% Height:auto 时它不显示网格，我不知道为什么，固定大小会导致列折叠导致奇怪的边距。

我还没有学过 js 和 jquery，所以如果可能的话，我想坚持使用 CSS。

   <div class="maincontent">
    <div class="imgrid"> 
       <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://i.imgur.com/09YFTfL.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
        <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div> 
    </div>
</div>

到目前为止的css：

.maincontent{
padding-top: 0%;
padding-left:0%;
}


.col {
    float: left;
    padding: 1%;
}
.col-lg{
    float:left;
    width: 300px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}

/* Images crop and center to col-lg box up to 1000% centering (if 100% if 
it's 3x the size it doesn't fully center)Idk man why? projectors and stuff? 
*/
.col-lg img{
    display:block;
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

http://jsbin.com/qowavucico/1/edit?html,css,output

编辑：这是我要寻找的效果， https://jsbin.com/puqehemoxa/edit?html,css,output

如何将这些值用于我之前发布的代码（使用自动裁剪）更改高度：auto;宽度：31.3%；填充：1%；将图像变成响应式 2 列煎饼。

https://jsbin.com/cejuseroxo/1/edit?html,css,output

【问题讨论】：

标签： css html

【解决方案1】：

您可以使用 css flex box 来实现这一点。请参阅下面的示例。

.maincontent{
	padding-top: 0%;
	padding-left:0%;
}

	
.col {
	/**float:left; dont need this**/
	padding: 1%;
}
.col-lg{
	/**float:left; dont need this**/
    height: 200px;
    overflow: hidden;
    margin: 10px 0;
    position: relative;
    flex-basis: 30%;
}

  /* Images crop and center to col-lg box up to 1000% centering (if 100% if it's 3x the size it doesn't fully center)Idk man why? projectors and stuff? */
.col-lg img{
	display:block;
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}
.imgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="maincontent">
        <div class="imgrid"> 
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://i.imgur.com/09YFTfL.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div> 
        </div>
       </div>
</body>
</html>

【讨论】：

谢谢！但是，这与设置纵横比的框混淆了，如果您愿意看一下，我将使用以前没有自动裁剪的代码作为示例更新了帖子。

【解决方案2】：

也可以通过给容器一个宽度（在我下面的示例中为 100vw）然后为您的 .col-lg 宽度和高度使用 calc() 表达式来获得非 flexbox 答案，如下所示：

.imgrid {
    width: 100vw;
}
.col-lg {
    height: calc(calc(100vw / 8) - 60px)); /* 1/3 container width because we have three columns, minus margins around the boxes */
    width: calc(calc(calc(100% / 3) - 60px) * 1.0752688); /* original aspect ratio of 400x372; 400/372 = 1.0752688 */ 
    margin: 10px;
}

下面的代码 sn-p 采用了该基本原则，但略微调整了边距/填充以帮助更好地居中。您可能需要稍微修改一下数字以适应您的实际用例。

body {
    margin: 0; /* not strictly necessary */
}
.maincontent{
    padding-top: 0%;
    padding-left: 0%;
}
.imgrid {
    width: 100vw;
    padding: 10px;
}
.col {
    float: left;
    padding: 1%;
}
.col-lg{
    float: left;
    width: calc(calc(calc(100% / 3) - 60px) * 1.0752688);
    height: calc(calc(100vw / 3) - 60px);
    overflow: hidden;
    margin: 0 10px 10px 0; /* make up for lack of margin collapse */
    position: relative;
    box-sizing: border-box; /* make our width calculation simpler because of the 1% padding we don't need to account for this way */
}
.col-lg img{
    display:block;
    position: absolute;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="maincontent">
        <div class="imgrid"> 
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://i.imgur.com/09YFTfL.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div>
            <div class="col col-lg "><img src="http://imgur.com/cN0XcVQ.jpg" alt=""></div> 
        </div>
       </div>
</body>
</html>

【讨论】：

感谢您抽出宝贵时间回复！我忘了提到试图保持纵横比相同，我已经编辑了我的帖子以反映这一点。当我尝试将宽度设置为自动但将高度设置为设置的 px 大小时，我得到了类似的结果。我无法理解为什么高度自动在我的第二个链接中没有自动裁剪但在我的第三个链接中没有自动裁剪。
啊，明白了。好吧，我查看了您在帖子中编辑的链接，但我只看到一张巨大的图片，所以不确定那里发生了什么。尽管如此，我还是更新了上面的答案以保持纵横比。只是对calc() 中的数学有一点兴趣而已。这就是你想要的吗？
好的，谢谢。 :) 现在要弄清楚如何保持收成不变。
如果以上内容不能满足您的需求，那么我一定对您的要求感到困惑。您需要将链接更新为您正在寻找的效果（目前已损坏），以便我或其他人进一步帮助您。