Question

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

网格框目前是固定值大小，因为当我尝试将其设置为宽度：100％高度：自动它不显示网格而我不确定原因，固定大小会导致列折叠造成奇怪的利润。

我还没有学过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

Answer 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>

Answer 2

通过为容器提供宽度（在下面的示例中为100vw），然后使用calc()表达式为.col-lg宽度和高度，也可以使用非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;
}

下面的代码片段采用了这个基本原则，但稍微调整了边距/填充以帮助更好地集中处理。您可能需要修改一些数字以适合您的实际用例。

＆＃13;

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%;
}

＆＃13;

<!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>

＆＃13;

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

2 个答案: