如何解决自动调整CSS网格图像的大小?
我想尝试以一定的屏幕宽度使视口按比例缩小到网格图像,但不确定如何操作并设法保持实际网格布局的完整性。我目前有一个网格,其中包含许多不同大小的图像和行,并且希望在所有设备(台式机,平板电脑,移动设备等)上保持相同的布局/网格结构。
是否有一种方法可以使整个网格及其所有图像在视口中收缩,就像该链接一样? Responsive Image
我知道这通常是将宽度设置为100%,将高度设置为自动的,但是当我将其应用于网格的标签时,图像上的高度会丢失。很感谢任何形式的帮助。谢谢!
以下是我正在使用的一些代码的示例:
.image-gallery {
width: 100%;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-gap: .5rem;
grid-template-areas:
'img-16 img-17 img-27'
'img-16 img-18 img-27'
'img-16 img-19 img-27'
}
// Styling applied to these template-areas are only background images
要使图像达到所需的尺寸,我必须设置一个高度,这是我想知道如何与图像进行这种类型的交互以及自动调整高度的地方。
.image-gallery a {
width: 100%;
min-height: 16rem;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。