Картинка внутри контейнера для упаковки строк немного переполняется

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

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

html css figure

0

Yann Heide Biedziński 23 Окт 2019 в 00:56

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>

0

Nidhin Joseph 23 Окт 2019 в 01:04

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>

0

symlink 23 Окт 2019 в 01:20

Картинка внутри контейнера для упаковки строк немного переполняется

2 ответа

Похожие вопросы

Новые вопросы

html