css - Блок карт, как позиционировать и размер изображения - PullRequest
Новая
       0

css - Блок карт, как позиционировать и размер изображения

1 голос
/ 24 марта 2020

У меня возникли проблемы с поиском наилучшего способа размещения и размера изображения в приведенном здесь примере.

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

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

*{
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.block{
  border: 1px solid grey;
  margin: 10px;
  position: relative;
}

.block__body{
  padding: 10px ;
}

.block__img{
  position: absolute;
  right: 0;
  top: 0;
}
<div class="block">

    <div class="block__body">
        <div>
            <h3 class="block__heading">
                Heading Text
            </h3>
            <p class="block__copy">Copy Text</p>
        </div>
    </div>
    <div class="block__img">
        <img
            src="https://placeimg.com/640/480/animals"
            alt="placeholder image"
        />
    </div>
</div>

Ответы [ 2 ]

1 голос
/ 24 марта 2020

Пожалуйста, проверьте мой код. С помощью свойства flex вы можете поместить их в один ряд. Чтобы масштабировать изображение в соответствии с размером экрана и для лучшего отклика, вы можете добавить к этому vw и vh .

И вам не нужно свойство position для этого, когда у вас есть свойство flex. 

* {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
      }

      .block {
        border: 1px solid grey;
        margin: 10px;
        height: 35vh;

        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
      }

      .block__body {
        padding: 10px;
        text-align: center;
        vertical-align: baseline;
      }

      .block__img img {
        width: 40vw;
        /*height: 30vh;*/
        height: 100%;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body>
    <div class="block">
      <div class="block__body">
        <h3 class="block__heading">
          Heading Text
        </h3>
        <p class="block__copy">Copy Text</p>
      </div>
      <div class="block__img">
        <img
          src="https://images.unsplash.com/photo-1502899845910-573a1d1c390d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9"
          alt="placeholder image"
        />
      </div>
    </div>
  </body>
</html>
1 голос
/ 24 марта 2020

Вам необходимо ограничить высоту элемента div и изображения, в противном случае он будет показан в исходном размере изображения. 

* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.block {
  border: 1px solid grey;
  margin: 10px;
  position: relative;
}

.block__body {
  padding: 10px ;
}

.block__img {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

Для <img> вы можете поместить его в строку: 

<img
  src="https://placeimg.com/640/480/animals"
  alt="placeholder image"
  height="100%"
/>

Или в CSS: 

.block__img img {
  height: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...