0

Подскажите новичку, как сделать так чтобы фото товара располагалось внутри дива по центру? Другими словами фото товара слева а описание к этому товару справа. Хотелось бы разместить фото по центру внутри родительского дива. Спасибо.

.card {
  margin: 0 15px;
  display: flex;
  height: 500px;
  justify-content: center;
  align-items: center;
  border: solid 1px red;
  border-radius: 15px;
  position: relative;
}

.card__item-img img {
  /* background-color: #fff; */
  min-height: 100%;
  min-width: 100%;
  border-radius: 25px;
}

.card img {
  height: 100%;
  width: 100%;
  border-radius: 15px;
}

.card__item-container {
  display: flex;
  height: 100%;
  max-width: 30%;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: #fff;
  border-radius: 15px;
}

.card__item-title {
  font-size: 2rem;
  font-weight: bold;
}

.card__item-text {
  margin: 0 25px;
  max-width: 65%;
  font-size: 1.1rem;
  text-align: justify;
  letter-spacing: 2px;
}

.card__item-btn {
  width: 200px;
  height: 50px;
  background-color: rgb(23, 215, 80);
  border-radius: 25px;
}
<div class="card">

  <div class="card__item-img"><img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" alt="img"></div>

  <div class="card__item-container">

    <h2 class="card__item-title">Joystick</h2>

    <p class="card__item-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde nisi vel accusamus necessitatibus quas illocupiditate nobis nostrum? Consectetur, in. Expedita ut, labore sapienteculpa excepturi repellendus provident magnam laboriosam, cupiditateobcaecati
      voluptatibus saepe, autem iste perspiciatis sit! Libero ullamiure hic expedita dignissimos sapiente laboriosam eius ipsa, aliquiddeleniti?.</p>

    <button class="card__item-btn" type="submit">BUY</button>

  </div>
</div>

1 ответ 1

0

Вам поможет свойство object-fit:

.test_img {
  width: 120px;
  height: 150px;
  padding: 10px;
  border: 1px solid coral;
  box-sizing: border-box;
  margin: 10px;
  display: inline-block;
}

.test_img img {
  width: 100%;
  height: 100%;
}
<div class="test_img"><img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" style="object-fit:fill"></div>

<div class="test_img"><img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" style="object-fit:contain"></div>

<div class="test_img"><img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" style="object-fit:cover"></div>

<div class="test_img"><img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" style="object-fit:none"></div>

<div class="test_img"><img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" style="object-fit:scale-down"></div>

1
  • Спасибо большое за помощь! И за развернутый ответ!
    – Kevlar
    25 мая 2022 в 9:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.