Изображение внутри контейнера переноса строк немного переполняется - PullRequest
Новая
       16

Изображение внутри контейнера переноса строк немного переполняется

0 голосов
/ 23 октября 2019

Все элементы этого контейнера 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

Я не хочу, чтобы при изменении размера правая граница контейнера касалась границы изображения.

Ответы [ 2 ]

0 голосов
/ 23 октября 2019

Вместо этого установите границу элемента фигуры: 

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>
0 голосов
/ 23 октября 2019

Попробуйте использовать 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>
...