Question

问题与下图所示的网格

我想要比例为1：1和2：1的图像

问题是1：1的像素为226px：242px 当我将100％的宽度和高度设为1：1时，则2：1的对齐方式将有所不同。

网格html代码应如下所示。 “使用合适的对象是好的”

<grid>
    <container ratio="1:1">
        <img src="https://placeimg.com/100/100/arch?id=1">
    </container>
    <container ratio="2:1">
        <img src="https://placeimg.com/200/100/arch?id=1">
    </container>
    <container ratio="1:1">
         <img src="https://placeimg.com/100/100/arch?id=1">
    </container>
</grid>

预期的网格应如下所示：

Answer 1

图像有些棘手，因为要达到完美效果，最好的方法是添加max-width: 100%并让高度auto或您可以使用max-height来达到完美的图像效果使用width并让图像决定height或反之亦然，您的问题可以通过此代码解决

img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

Answer 2

好的，所以我用我自己的：D

body {
    margin: 24px;
}

grid {
    display: grid;
    margin: 0;
    grid-gap: 24px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

container {
    position: relative;
}

container > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

[ratio="1:1"] {
    grid-column-end: span 3;
}

[ratio="2:1"] {
    grid-column-end: span 6;
}

[ratio="2:1"] > img {
    height: -webkit-fill-available;
    position: absolute;
}

<grid>
    <container ratio="1:1">
        <img src="https://placeimg.com/1000/1000/arch?id=1">
    </container>
    <container ratio="2:1">
        <img src="https://placeimg.com/2000/1000/arch?id=2">
    </container>
    <container ratio="1:1">
         <img src="https://placeimg.com/1000/1000/arch?id=3">
    </container>

    <container ratio="2:1">
        <img src="https://placeimg.com/2000/1000/arch?id=4">
    </container>
    <container ratio="1:1">
        <img src="https://placeimg.com/1000/1000/arch?id=5">
    </container>
    <container ratio="1:1">
         <img src="https://placeimg.com/1000/1000/arch?id=6">
    </container>

    <container ratio="1:1">
         <img src="https://placeimg.com/1000/1000/arch?id=7">
    </container>
    <container ratio="1:1">
         <img src="https://placeimg.com/1000/1000/arch?id=8">
    </container>
    <container ratio="1:1">
         <img src="https://placeimg.com/1000/1000/arch?id=9">
    </container>
    <container ratio="1:1">
         <img src="https://placeimg.com/1000/1000/arch?id=10">
    </container>

    <container ratio="1:1">
        <img src="https://placeimg.com/1000/1000/arch?id=11">
    </container>
    <container ratio="1:1">
        <img src="https://placeimg.com/1000/1000/arch?id=12">
    </container>
    <container ratio="2:1">
         <img src="https://placeimg.com/2000/1000/arch?id=13">
    </container>
</grid>

享受！：）

顺便说一下...网格用于我的FrameWork-MatDesign

仅图像网格列表

2 个答案: