控制一个CSS网格内的图像的大小

我有一个css网格，有一堆区域和一个照片容器。控制一个CSS网格内的图像的大小

我不知道如何：

1）控制照片的大小，因此它被包含在网格区域内，并

2）保持照片的宽度在100％（因此等于它的容器）并且缩放容器的高度以适合照片。基本上，则窗口变得更小，照片的宽度变小，所以确实高度 - 拉标签，专辑和旋转元素，直到....

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(5, 1fr); 
 
    grid-template-rows: 40vh 30vh 30vh; 
 
    grid-gap: 10px; 
 
    grid-template-areas: 
 
    "info photo photo photo photo" 
 
    "comment photo photo photo photo" 
 
    "comment tag  tag album rotate" 
 
} 
 

 
.photo { 
 
    grid-area: photo; 
 
    background: yellow; 
 
} 
 

 
.photo>img { 
 
    object-fit: cover; 
 
    width: 100% 
 
} 
 

 
.info { 
 
    grid-area: info; 
 
    background: pink; 
 
} 
 

 
.tag { 
 
    grid-area: tag; 
 
    background: teal; 
 
} 
 

 
.comment { 
 
    grid-area: comment; 
 
    background: green; 
 
} 
 

 
.album { 
 
    grid-area: album; 
 
    background: red; 
 
} 
 

 
.rotate { 
 
    grid-area: rotate; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="photo"> 
 
    <img src="http://wallpaper-gallery.net/images/image/image-13.jpg" /> 
 
    </div> 
 
    <div class="info">info</div> 
 
    <div class="tag">tag</div> 
 
    <div class="comment">comment</div> 
 
    <div class="album">album</div> 
 
    <div class="rotate">rotate</div> 
 
</div>

来源

2017-09-07 martin

我不认为你要完成可以用网格做什么。 – BrandonW

这里有两个不同的问题。

我将解决第一个问题，它将图像包含在其容器中。你几乎拥有它。

您的代码：

.photo > img { 
    object-fit: cover; 
    width: 100% 
}

你只需要在图像上指定的最大高度，它可能不会溢出容器：

.photo > img { 
    object-fit: cover; 
    width: 100% 
    max-height: 100%; 
}

jsFiddle demo

第二个问题，这是规模图像容器的大小，以及在图像变小时将下面的网格物体拖动起来，显得更加复杂。

这不是与图像有关的问题。事实上，您可以在尝试解决此问题时完全删除图像。

这是动态调整网格项目（图像容器）大小的问题。为什么当这个网格项目的尺寸受到grid-template-columns和grid-template-rows的控制时，会相对于图片尺寸改变尺寸？

另外，为什么底部的一行栅格项（tag,album,rotate）会跟随图像容器向上或向下？他们将不得不退出他们的行。

缩放整个网格容器不会是一个问题。但它似乎只是想缩放一个网格项目（图像容器）。这很棘手。您可能正在查看其他容器，长度值为auto，可能还有脚本。

这里的，如果你给图像行的auto值会发生什么：jsFiddle demo

来源

2017-09-07 14:13:28

感谢您的指导。第一个问题/解决方案解决了我的头痛问题！你对第二部分是对的。我将解决它正在调整我正在使用的3种媒体布局（移动，平板电脑，笔记本电脑）的不同布局。我完全明白你的观点:-) – martin

-1

你可能需要添加显式宽度：100％图像

来源

2017-09-07 07:56:58

我已经添加了，但它只是使它掉在底部......我已经试过对象适合 - 但是这并没有做任何事情 – martin

如果你使用背景图像内的网格单元，而不是IMG标签的一个（没用过显示：网格还没有B/C它是如此新 - 酷！）

然后使用背景大小和背景位置，您可以在该单元格内正确调整大小。

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(5, 1fr); 
 
    grid-template-rows: 40vh 30vh 30vh; 
 
    grid-gap: 10px; 
 
    grid-template-areas: "info photo photo photo photo" "comment photo photo photo photo" "comment tag  tag album rotate" 
 
} 
 

 
.photo { 
 
    grid-area: photo; 
 
    background: yellow; 
 
    height: 100%; 
 
    background-size: cover; /* <-- background size */ 
 
    background-position: center; /* <-- background position */ 
 
} 
 

 
.info { 
 
    grid-area: info; 
 
    background: pink; 
 
} 
 

 
.tag { 
 
    grid-area: tag; 
 
    background: teal; 
 
} 
 

 
.comment { 
 
    grid-area: comment; 
 
    background: green; 
 
} 
 

 
.album { 
 
    grid-area: album; 
 
    background: red; 
 
} 
 

 
.rotate { 
 
    grid-area: rotate; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="photo" style="background-image: url('https://thumbs.web.sapo.io/?epic=YmIzAEUIMb3pue+Zz8qV8QS/WuKmq0vrL/lWiluSn7SstKeeh7/UTTBAuDlhHFD6YC9+vaCHBQuNOXeVaHkjzTSE8tF3hMBev6512ha92Yc4kRw=&W=1200&H=627&crop=center&delay_optim=1')"> 
 
    </div> 
 
    <div class="info">info</div> 
 
    <div class="tag">tag</div> 
 
    <div class="comment">comment</div> 
 
    <div class="album">album</div> 
 
    <div class="rotate">rotate</div> 
 
</div>

来源

2017-09-07 14:47:15 flyer

控制一个CSS网格内的图像的大小

回答

相关问题