自定义网格与图像

因此，我正在使用像Bootstrap3这样的库，因为我正在学习网络开发，但我想通过完全理解并能够重新创建一些可用于引导的东西来深入了解网络开发方面的知识。我目前正在搞定一个自定义网格，并将图像放入其中，以保持响应。问题是，无论图像大小是否在我的行中，我都希望图像都处于一个高度。图片的宽度与我的想法完全相同，但我无法获得相同的高度（或者至少切除了多余的图片，这是我正在处理的Custom Grid CodePen。很多问题的答案都在使用它，我不使用background-image性质，任何帮助将不胜感激感谢自定义网格与图像

编辑：！

HTML

<div class="row"> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/M8spMIQcg24"> 
    </div> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/U--hvQ5MKjY"> 
    </div> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/F3ePNdQb_Lg"> 
    </div> 
    </div>

CSS

.row { 
    position: relative; 
    min-width: 100%; 
} 

.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 

[class*="col-"] { 
    float: left; 
} 

.responsiveImage { 
    max-width: 100%; 
    height: auto; 
    padding-top: 30%; 
}

来源

2017-07-18 demogorgon.net

你想要图像填充它们各自的列，但都具有相同的高度？

你当然可以在图像周围添加包装div并使它们成为height:200px和overflow:hidden。但是这不会对此作出响应。

如果我正确地理解了你，你想要的东西不能在没有使用flexbox或javascript的情况下在CSS中完成。看到我无耻地从谷歌挑选的这个codepen：https://codepen.io/imohkay/pen/gpard。或者更深入一下：https://clearleft.com/posts/270

来源

2017-07-18 19:52:46 phil

你需要指定你想要的高度，然后将图像宽度auto以保持其比例缩放。

.responsiveImage { 
    height: 300px; 
    width: auto; 
    padding-top: 30%; 
}

来源

2017-07-18 19:46:17 Blazemonger

自定义网格与图像

回答

相关问题