Как бы я уменьшил изображения с помощью flexbox? - PullRequest
Новая
       22

Как бы я уменьшил изображения с помощью flexbox?

0 голосов
/ 02 ноября 2018

Мне трудно понять, как сделать мой код удобным для мобильных устройств; версия для ПК выглядит неплохо, но на мобильном телефоне она растягивает биографию, и часть текста уходит со страницы. Я не могу придумать, как уменьшить изображение, когда оно отображается на мобильном телефоне, и аккуратно уложить содержимое в бок. Любой совет будет оценен и заранее спасибо.

Мобильный телефон:

image

Компьютер:

image

div.readerone {
  display: flex;
  align-items: center;
}

p.right {
  border-radius: 5px!important;
  border: 1px ridge #AA9DE0;
  background-color: #E1E0FF;
  padding: 10px;
  margin-left: 20px;
}
<div class="readerone"><img src="https://image.ibb.co/fvO800/csongor-daniel- 
    hs-10-14-2015-016.jpg" alt="csongor-daniel-hs-10-14-2015-016" width="210" height="300" border="0" />
  <p class="right">bio desc.</p>
</div>

1 Ответ

0 голосов
/ 02 ноября 2018

Вы должны установить% width для ваших дочерних элементов: 

div.readerone {
  display: flex;
  align-items: center;
}

div.readerone img { 
  width: 50%;
  object-fit: contain;
}

p.right {
  width: 50%;
  border-radius: 5px!important;
  border: 1px ridge #AA9DE0;
  background-color: #E1E0FF;
  padding: 10px;
  margin-left: 20px;
}
<div class="readerone"><img src="https://image.ibb.co/fvO800/csongor-daniel- 
    hs-10-14-2015-016.jpg" alt="csongor-daniel-hs-10-14-2015-016" width="210" height="300" border="0" />
  <p class="right">bio desc.</p>
</div>

Но на мобильном устройстве вы должны переместить изображение поверх текста или ниже, чтобы изображение имело ширину 100%, а текст - шириной 100%: 

div.readerone { 
  display: flex;
  flex-direction: column;
}
...