行包装容器中的图片稍微溢出

Question

该容器的所有项目article都以应有的方式包装，但该image的右边界溢出了容器的article边界。

我的解决方法是添加一个mediaquery @1041px和一点padding，以便边界永远不会到达图像的边界，但是必须有一种更清晰的方法来解决这一问题。

并且不带figure的结果是相同的。

article {
      border: solid black;
      border-width: 6px;
      font-family: 'Lato';
      font-size: 2.5em;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      text-justify: distribute;
      padding: 5px;}

figure {
      margin: 0;
      line-height: 0;}

img {
      max-width: 100%;
      height: auto;
      border: black solid;
      border-width: 6px;
      margin: 5px;}

////

  <article>
  <figure>
    <img class="id" src="images/idkort_vit_2.jpg" alt="Marine Heide 
    portrait" />
  </figure>

<div class="intro">
  <div id="one">XXX XXX är född i XXX XXX och bosatt i XXX XXX. 
  </div>

  <div id="two">Hon har vuxit upp i en mångkulturell familj med XXX 
  bakgrund och är verksam som XXX, 
  XXX och XXX.
  </div>

  <div id="three">XXX XXX är doktor vid XXX XXX och har 
  också läst XXX XXX samt 
  XXX XXX på XXX XXX i XXX XXX.
  </div>
</div> 
  </article>

https://codepen.io/cykelcykel/pen/dyyvGBg

我不希望容器的右边界在调整大小时接触图像的边界。

Answer 1

尝试对box-sizing: border-box使用img，因为这会说明添加的边框，并且比margin本身更适用figure的img。

article {
  border: solid black;
  border-width: 6px;
  font-family: 'Lato';
  font-size: 2.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-justify: distribute;
  padding: 5px;
}

figure {
  margin: 5px;
  line-height: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: black solid;
  border-width: 6px;
  box-sizing: border-box;
}

.intro {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding: 5px;
  align-items: center;
}

#one {
  border: solid black;
  border-width: 6px;
  margin: 5px;
  flex: 2;
}

#two {
  border: solid black;
  border-width: 6px;
  margin: 5px;
  flex: 2;
}

#three {
  border: solid black;
  border-width: 6px;
  margin: 5px;
  flex: 1;
}

<article>
  <figure>
    <img class="id" src="https://i.postimg.cc/9X9twXdN/idkort-vit-2.jpg" alt="Marine Heide portrait" />
  </figure>
  <div class="intro">
    <div id="one">XXX XXX är född i XXX XXX och bosatt i XXX XXX.</div>
    <div id="two">Hon har vuxit upp i en mångkulturell familj med XXX bakgrund och är verksam som XXX, XXX och XXX.</div>
    <div id="three">XXX XXX är doktor vid XXX XXX och har också läst översättning samt tolkning på XXX XXX i XXX.</div>
  </div>
</article>

Answer 2

改为在图形元素上设置边框：

article {
  border: 6px solid black;
  font-family: 'Lato';
  font-size: 2.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-justify: distribute;
  padding: 5px;
}

figure {
  margin: 0;
  line-height: 0;
  border: solid 6px #000;
}

img {
  width: 100%;
}

.intro {
  display: flex;
  flex: 1;
  padding: 5px;
  align-items: center;
  flex-wrap: wrap;
}

#one, #two, #three {
  border: solid black;
  border-width: 6px;
  margin: 5px;
  flex: 2;
}

#three {
  flex: 1;
}

<article>
  <figure>
    <img class="id" src="https://placekitten.com/1200/400" />
  </figure>
  <div class="intro">
    <div id="one">XXX XXX är född i XXX XXX och bosatt i XXX XXX.</div>
    <div id="two">Hon har vuxit upp i en mångkulturell familj med XXX bakgrund och är verksam som XXX, XXX och XXX.</div>
    <div id="three">XXX XXX är doktor vid XXX XXX och har också läst översättning samt tolkning på XXX XXX i XXX.</div>
  </div>
</article>