代码之家 › 专栏 › 技术社区 › Maarten -Monica for president

将图像放在锚点标记内时调整网格中的图像大小

css-grid flexbox image css html

Maarten -Monica for president · 技术社区 · 9 月前

我有一个响应(列的数量随着设备宽度的变化而变化)网格布局。最初按我的意愿工作,但无法使图像可点击。为了让图片可以点击,我想把它们放在锚标签里,链接到一些子域。 然而,当我这样做时(在锚标记中环绕图像,或任何其他标记,如div),这些图像的大小/似乎不再遵循我为这些图像设置的CSS样式 。我不知道为什么。请参阅下面的代码笔和图片。感谢您的任何意见!

screenshot of issue 右下角较小的图像是周围有锚标签的图像

Codepen ( 注意:网格中的最后两个图像带有锚点标签 )

我不明白为什么 <a> 图像周围的标签会使我的CSS选择器 .photos img 不再工作,因为我认为这个选择器适用于所有人 img 带有类“photos”的div中的元素和网格中的图像仍然在 .photos 也许锚元素以某种方式覆盖了我的CSS样式,并导致图像以这种方式调整大小?这是真的吗?如果是,我如何在使图像可点击(被锚标记包围)的同时防止这种调整大小?

* {
  box-sizing: border-box;
}

#imageTextGrid {
  width: 100vw;
  margin: 0;
  margin-right: 0;
  /* display: flex; */
}

.photos {
  display: flex;
  /* background-color: #000; */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  padding: 0;
  max-width: 100vw;
}

.photos img {
  display: block;
  float: left;
  flex: 0 0 auto;
  padding: .35vw;
  background-color: #fff;
}

@media screen and (min-width: 1024px) {
  .photos img {
    width: calc(100%/3);
    height: calc(100%/3);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .photos img {
    width: calc(100%/2);
    height: calc(100%/2);
  }
}

@media screen and (min-width: 50px) and (max-width: 768px) {
  .photos img {
    width: calc(100%/1);
    height: calc(100%/1);
  }
}

<div id="imageTextGrid">
  <div class="photos">
    <!-- <img class="thumbnailImg" src="img/about page 1/proj_thumnails/1_apeldoorn.PNG" /> -->
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <a><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
  </div>
</div>

0 回复 | 直到 9 月前

Tim R 9 月前

将图像放置在锚点标记内时调整大小的原因是,您已将图像大小声明为百分比,即父元素大小的百分比。

.photos img {
  width: calc(100%/3);
  height: calc(100%/3);
}

若要解决此问题,请声明 width: 100% 当图像在锚内(选择器具有更高的特异性)并且在用于计算图像宽度的选择器中包括锚时。

.photos a img {
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .photos a,
  .photos img {
    width: calc(100%/3);
    height: calc(100%/3);
  }
}

* {
  box-sizing: border-box;
}

#imageTextGrid {
  width: 100vw;
  margin: 0;
  margin-right: 0;
  /* display: flex; */
}

.photos {
  display: flex;
  /* background-color: #000; */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  padding: 0;
  max-width: 100vw;
}

.photos img {
  display: block;
  float: left;
  flex: 0 0 auto;
  padding: .35vw;
  background-color: #fff;
}

.photos a img {
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .photos a,
  .photos img {
    width: calc(100%/3);
    height: calc(100%/3);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .photos a,
  .photos img {
    width: calc(100%/2);
    height: calc(100%/2);
  }
}

@media screen and (min-width: 50px) and (max-width: 768px) {
  .photos a,
  .photos img {
    width: calc(100%/1);
    height: calc(100%/1);
  }
}

<div id="imageTextGrid">
  <div class="photos">
    <!-- <img class="thumbnailImg" src="img/about page 1/proj_thumnails/1_apeldoorn.PNG" /> -->
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" />
    <a><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
  </div>
</div>

此外,大多数CSS声明都是不必要的,包括 height 和 calc()

* {
  box-sizing: border-box;
}

.photos {
  display: flex;
  flex-wrap: wrap;
}

.photos img {
  padding: .35vw;
}

.photos a img {
  width: 100%;
}

@media (min-width: 1024px) {
  .photos a,
  .photos img {
    width: calc(100%/3);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .photos a,
  .photos img {
    width: 50%;
  }
}

@media (min-width: 50px) and (max-width: 768px) {
  .photos a,
  .photos img {
    width: 100%;
   }
}

<div id="imageTextGrid">
  <div class="photos">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg">
    <a><img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg"></a>
    <a><img src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg"></a>
  </div>
</div>

此外,使用CSS网格代替Flexbox可以大大简化CSS

* {
  box-sizing: border-box;
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: .35vw;
}

.photos img {
  width: 100%;
}

<div id=“imageTextGrid”>
<div class=“照片”>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“>
<a><img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“></a>
<a><img src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“></a>
</div>
</div>

ralph.m 9 月前

使用Flexbox或Grid很容易做到这一点,但Grid更好,因为它最后没有调整掉队者的大小。

下面是一个快速的网格演示(根据需要进行调整):

*{
box-sizing: border-box;
}

#imageTextGrid {
    width: 100vw;
}

.photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.photos a {
  aspect-ratio: 626/ 417;
}

.photos img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div id="imageTextGrid">
  <div class="photos">
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
    <a href=""><img class="thumbnailImg" src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg" /></a>
  </div>
</div>

以下是Flexbox的快速演示:

*{
box-sizing: border-box;
}

#imageTextGrid {
    width: 100vw;
}

.photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.photos a {
  flex: 1 1 20%;
  aspect-ratio: 626/ 417;
}

.photos img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div id=“imageTextGrid”>
<div class=“照片”>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
<a href=“”><img class=“thumbnailImg”src=“https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg“/></a>
</div>
</div>

Brett Donald 9 月前

正如@ralph.m在对这个问题的评论中所说,只有flex容器的直接子级是flex项,所以一旦你将锚元素包裹在图像周围,锚就变成了flex项,而不是图像。

但是,如果应用样式 display: contents 对于锚点元素,该元素从显示层次结构中删除,其子元素(图像)有效地在层次结构中向上移动了一个级别(因此图像将再次成为灵活项)。