Я пытаюсь заполнить столбец строки изображением

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

Я пробовал с высотой 100% и object-fit:cover, но ничего не помогло.

Проблема в первом столбце (остальные столбцы игнорируйте).

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
}

.hotel-box img {
  height: 100%;
  object-fit: cover;
}

<!-- Bootstrap-5 -->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">


<!-- Body -->
<div class = "hotel-box">
  <div class = "row">
    <div class = "col-4">
      <img src = "https://cf.bstatic.com/xdata/images/hotel/max1024x768/279134335.jpg?k=341488f6f4dc7bc8d6232b06730e304ed655bd4a944b1a90eb2ab81ac92a0568&o=&hp=1" alt = "">
    </div>
    <div class = "col-5">
      <h3>Hotel name</h3>
      <p>some info</p>
      <p>room info</p>
      <p>extra info</p>
    </div>
    <div class = "col-3">
      <h4>word rating</h4>
      <p>number reviews</p>
      <span>number rating</span>
      <span>BGN price</span>
      <p>per night per person(под числото с дребен шрифт)</p>
    </div>
  </div>
</div>

css image flexbox bootstrap-5 object-fit

06.05.2024 22:00

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Попробуй это:

.hotel-box img{
    width: 100%;
}

Это конкретно вопрос Bootstrap. Нет необходимости в пользовательском CSS

— 07.05.2024 01:22

06.05.2024 22:12

Простое использование width: 100%; должно сработать.

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
}

.hotel-box img {
  width: 100%;
}

<div class = "hotel-box">
  <div class = "row">
    <div class = "col-4">
      <img src = "https://cf.bstatic.com/xdata/images/hotel/max1024x768/279134335.jpg?k=341488f6f4dc7bc8d6232b06730e304ed655bd4a944b1a90eb2ab81ac92a0568&o=&hp=1" alt = "">
    </div>
    <div class = "col-5">
      <h3>Hotel name</h3>
      <p>some info</p>
      <p>room info</p>
      <p>extra info</p>
    </div>
    <div class = "col-3">
      <h4>word rating</h4>
      <p>number reviews</p>
      <span>number rating</span>
      <span>BGN price</span>
      <p>per night per person(под числото с дребен шрифт)</p>
    </div>
  </div>
</div>

Это конкретно вопрос Bootstrap. Нет необходимости в пользовательском CSS

— 07.05.2024 01:22

06.05.2024 22:15

Для этого вам не нужен специальный CSS. Просто добавьте классы w-100 и object-fit-cover к изображению:

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
}

<!-- Bootstrap-5 -->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">


<!-- Body -->
<div class = "hotel-box">
  <div class = "row">
    <div class = "col-4">
      <img src = "https://cf.bstatic.com/xdata/images/hotel/max1024x768/279134335.jpg?k=341488f6f4dc7bc8d6232b06730e304ed655bd4a944b1a90eb2ab81ac92a0568&o=&hp=1" alt = "" class = "w-100 object-fit-cover">
    </div>
    <div class = "col-5">
      <h3>Hotel name</h3>
      <p>some info</p>
      <p>room info</p>
      <p>extra info</p>
    </div>
    <div class = "col-3">
      <h4>word rating</h4>
      <p>number reviews</p>
      <span>number rating</span>
      <span>BGN price</span>
      <p>per night per person(под числото с дребен шрифт)</p>
    </div>
  </div>
</div>

Обратите внимание: ваш дизайн не полностью адаптивный. Вам следует добавить классы точек останова.

Может, еще раз прочитать вопрос? Bootstrap специально не рассматривает это. Вам нужен специальный CSS.

— 07.05.2024 08:01

07.05.2024 01:21

Ответ принят как подходящий

Самый простой способ добиться этого — сделать изображение фоном столбца, как показано в примере ниже. Используйте специальный CSS для изменения размера и положения изображения, и вы можете динамически встроить свойство background-image для каждого элемента в вашем HTML.

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
}

.hotel-box .image-col {
  background-position-x: center;
  background-size: cover;
}

<!-- Bootstrap-5 -->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">


<!-- Body -->
<div class = "hotel-box">
  <div class = "row">
    <div class = "col-4 image-col" style='background-image: url("https://cf.bstatic.com/xdata/images/hotel/max1024x768/279134335.jpg?k=341488f6f4dc7bc8d6232b06730e304ed655bd4a944b1a90eb2ab81ac92a0568&o=&hp=1");' alt = "">
    </div>
    <div class = "col-5">
      <h3>Hotel name</h3>
      <p>some info</p>
      <p>room info</p>
      <p>extra info</p>
    </div>
    <div class = "col-3">
      <h4>word rating</h4>
      <p>number reviews</p>
      <span>number rating</span>
      <span>BGN price</span>
      <p>per night per person(под числото с дребен шрифт)</p>
    </div>
  </div>
</div>

07.05.2024 05:58

Другие вопросы по теме

Преобразование строк данных в один столбец, включая ИЗОБРАЖЕНИЯ

Javascript и холст, проблема с координатами вращения изображения

Как скомпоновать статическое фоновое изображение и gif с помощью пакета Sharp nodejs

Flutter: не удалось декодировать изображение. Не удалось создать декодер изображения с сообщением «неверный ввод». Ввод содержал ошибку

Как показать следующее изображение по URL-адресу без указания ширины и высоты

Как читать теги изображений в VB.NET, используя раздел описания

Изображение профиля не отображается

Деформация изображения с заданным набором точек

Как обрезать прозрачность изображения, но при необходимости сохранить минимальный размер и положение

Как обрезать изображение NIFTI, сохранив его происхождение?

Я пытаюсь заполнить столбец строки изображением

Ответы 4

Другие вопросы по теме

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