带有图像的自定义网格
Custom Grid with Images
所以我在学习 Web 开发时使用了像 Bootstrap3 这样的库,但我想通过充分理解并能够重新创建 bootstrap 中可用的一些东西来进一步提高我在 Web 开发方面的知识。我目前正在弄乱自定义网格并将图像放入其中以保持响应。问题是,无论我的行中图像的大小如何,我都希望图像都处于一个高度。图像的宽度正是我所想的,但我无法使高度相同(或至少切掉任何多余的图像。这是我正在处理的 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%;
}
您需要指定所需的高度,然后将图像宽度设置为 auto
以使其按比例缩放。
.responsiveImage {
height: 300px;
width: auto;
padding-top: 30%;
}
是否要让图片填充各自的列但高度相同?
您当然可以在图像周围添加环绕 div 并使它们成为 height:200px
和 overflow:hidden
。但这不会有反应。
如果我没理解错的话,如果不使用 flexbox 或 javascript,则无法在 CSS 中完成您想要的。请参阅我无耻地从 google 中挑选的代码笔:https://codepen.io/imohkay/pen/gpard. Or a more in depth look: https://clearleft.com/posts/270
所以我在学习 Web 开发时使用了像 Bootstrap3 这样的库,但我想通过充分理解并能够重新创建 bootstrap 中可用的一些东西来进一步提高我在 Web 开发方面的知识。我目前正在弄乱自定义网格并将图像放入其中以保持响应。问题是,无论我的行中图像的大小如何,我都希望图像都处于一个高度。图像的宽度正是我所想的,但我无法使高度相同(或至少切掉任何多余的图像。这是我正在处理的 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%;
}
您需要指定所需的高度,然后将图像宽度设置为 auto
以使其按比例缩放。
.responsiveImage {
height: 300px;
width: auto;
padding-top: 30%;
}
是否要让图片填充各自的列但高度相同?
您当然可以在图像周围添加环绕 div 并使它们成为 height:200px
和 overflow:hidden
。但这不会有反应。
如果我没理解错的话,如果不使用 flexbox 或 javascript,则无法在 CSS 中完成您想要的。请参阅我无耻地从 google 中挑选的代码笔:https://codepen.io/imohkay/pen/gpard. Or a more in depth look: https://clearleft.com/posts/270