行包装容器内的图片溢出一点答案

【问题标题】：Picture inside a row wrap container overflows just a little行包装容器内的图片溢出一点
【发布时间】：2019-10-22 21:56:03
【问题描述】：

该容器的所有项目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

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

【问题讨论】：

标签： html css figure

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：