Fullscreen gallery issue

Question

What I have:

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>

What I need:

Add <a href="#"></a>. But if I do It, It will break the whole page. The "a" must only cover the "img" (not 100% width of "a"). Div with first class handling aspect ratio (height). Help me add "a" with the same design behavior as without it.

<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

You need to wrap your image with a div and add <a> inside that div. Then you can set the div to be display:inline-block so that it will wrap it's size according to the image size and hence the <a> will be adjusted as you want. Please check the fiddle 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;}

Answer 2

By setting the element to a width of 100% you can center the image inside the a using transform property FIDDLE

.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;
}

You will need to remove the aling-items property from the container or set it to its default value..