0

I have a page containing rows of images in a flexbox container. I'm attempting to link these images to their source images, and when surrounding the images with an <a> tag, the image no longer conforms to the boundaries of its parent container. I realize this is likely because the <a> tag becomes the <img> tag's parent, but I'm inheriting attributes from the parent container, so the <a> tag should be styled the same.

How can I get the image to respect the 350x225 boundary with this setup?

With Link: 

.frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.frame-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin-top: 5%;
}

.frame-item {
  position: relative;
  width: 350px;
  height: 225px;
  max-width: 31%;
}

.frame-item a {
  width: inherit;
  height: inherit;
  max-width: inherit;
}

.frame-item>img {
  width: 100%;
  height: 100%;
}
<div class="frame-row">
  <div class="frame-item">
    <a href="http://placehold.it/1000">
      <img src="http://placehold.it/1000">
      <div class="item-overlay">
        <p>Grand Royale Ct.<br> Alamo, CA</p>
      </div>
    </a>
  </div>
</div>

Without Link:

.frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.frame-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin-top: 5%;
}

.frame-item {
  position: relative;
  width: 350px;
  height: 225px;
  max-width: 31%;
}

.frame-item a {
  width: inherit;
  height: inherit;
  max-width: inherit;
}

.frame-item>img {
  width: 100%;
  height: 100%;
}
<div class="frame-row">
  <div class="frame-item">
    <img src="http://placehold.it/1000">
    <div class="item-overlay">
      <p>Street<br> City, State</p>
    </div>

  </div>
</div>
froggomad
  • 1,747
  • 2
  • 17
  • 40

1 Answers1

0

.frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.frame-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin-top: 5%;
}

.frame-item {
  position: relative;
  width: 350px;
  height: 225px;
  max-width: 31%;
}

.frame-item a {
  width: inherit;
  height: inherit;
  max-width: inherit;
}

.frame-item a>img {
  width: 100%;
  height: 100%;
}
<div class="frame-row">
  <div class="frame-item">
    <a href="http://placehold.it/1000">
      <img src="http://placehold.it/1000">
      <div class="item-overlay">
        <p>Grand Royale Ct.<br> Alamo, CA</p>
      </div>
    </a>
  </div>
</div>
novruzrhmv
  • 639
  • 5
  • 13
  • can you tell us what did you change/add, It's hard to play at *find the difference* – Temani Afif Jun 28 '19 at 19:54
  • 1
    @Temani Afif - he changed the selector for images since image is no longer a direct descendant of .frame-item – froggomad Jun 28 '19 at 19:55
  • 1
    @froggomad I know what he changed, I meant it's useful to say this in the answer so people who don't understand the issue can easily find this because it's no something trivial to notice – Temani Afif Jun 28 '19 at 19:56