Question

我拥有的：

JSFiddle：https://jsfiddle.net/bpekoueg/6/

<!--
  |--------------------|
  |                    |
  |  Name              |
  |                    |
  |     |--------|     |
  |     | Poster |     |
  |     |        |     |
  |     |        |     |
  |     |        |     |
  |     |--------|     |
  |                    |
  |--------------------|
-->

<div class="year--30-G">
  <div class="year__name--2C0i">A2</div>
  <div class="year__first--1eze">
    <img src="" class="year__poster--cv7K" alt="">
  </div>
</div>

我需要什么：

添加<a href="#"></a>。但如果我这样做，它将打破整个页面。 “a”必须仅覆盖“img”（不是“a”的100％宽度）。具有头等处理宽高比（高度）的Div。帮我添加“a”，其设计行为与没有它的设计行为相同。

<div class="year--30-G">
  <div class="year__name--2C0i">A2</div>
  <div class="year__first--1eze">
    <a href="#">
      <img src="" class="year__poster--cv7K" alt="">        
    </a>
  </div>
</div>

CSS：

.year--30-G {
  background: rgb(248, 248, 248);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100vw;
  padding: 1rem;
}

.year__name--2C0i {
  color: rgb(8, 8, 8);
  font-size: 1em;
  font-weight: 600;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.year__first--1eze {
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}

.year__poster--cv7K {
  border: 2px solid rgb(128, 128, 128);
  max-height: 100%;
  max-width: 100%;
  position: absolute;
}

Answer 1

通过将元素设置为100％的宽度，您可以使用转换属性FIDDLE

将图像置于a中心

.year__poster--cv7K {
    border: 2px solid rgb(128, 128, 128);
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    transform: translateX(-50%);

}
a{
    width: 100%;
    text-align: center;
}

您需要从容器中删除aling-items属性或将其设置为默认值..

Answer 2

您需要使用div包装图像并在该div中添加<a>。然后你可以将div设置为display:inline-block，以便根据图像大小包装它的大小，因此<a>将根据需要进行调整。请检查小提琴here

<强> HTML

  <div class="year--30-G">
  <div class="year__name--2C0i">A2</div>
  <div class="year__first--1eze"><div class="imgholder">

  <img src="https://static.zerochan.net/Archer.%28Fate.stay.night%29.full.1791182.jpg" class="year__poster--cv7K" alt=""><a href="#">sample link</a></div></div>
</div>

<强> CSS

    :root {
  --border-radius: 2px;
  /* Header */
  --header-background-color: rgb(32, 32, 32);
  --header-color: #fff;
  /* Years */
  --years__year-background-color: var(--header-color);
  --years__year-color: var(--header-background-color);
  --years__year_opened-background-color: var(--header-color);
  --years__year_opened-color: var(--header-background-color);
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 1.25em;
  line-height: 1.25;
  margin: 0;
}

.year--30-G {
  background: rgb(248, 248, 248);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100vw;
  padding: 1rem;
}

.year__name--2C0i {
  color: rgb(8, 8, 8);
  font-size: 1em;
  font-weight: 600;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.year__first--1eze {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

.year__poster--cv7K {
  border: 2px solid rgb(128, 128, 128);
  max-height: 100%;
  max-width: 100%;
  position: absolute;
}
.imgholder{position:relative;display:inline-block;}
.year__first--1eze a{position:absolute;left:0;top:0;right:0;bottom:0;background:red;}

全屏画廊问题

我拥有的：

我需要什么：

CSS：

2 个答案: