I am attempting to populate a cell in a row with an image

Having trouble fitting an image into a column of a row created using Bootstrap. I want the image to be the same height as the row and any part that doesn't fit the width to be cropped out. However, the image either takes up only the width of the column leaving the space below empty or becomes larger than the entire table.

I have tried setting the height to 100% and using object-fit:cover but nothing seems to work.

The issue specifically lies with the first column (ignore the other columns).

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa2bfa2">[email protected]</a>/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>
cssimageflexboxbootstrap-5object-fit

Answer №1

To easily achieve this, consider setting the image as the background of the column, following the example provided below. Utilize customized CSS to adjust the size and placement of the image while dynamically incorporating the background-image property for each element in your 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56343939222522243726166378657865">[email protected]</a>/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>

Answer №2

Avoid using custom CSS for this task. Just include the classes w-100 and object-fit-cover to the image:

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545302b362b06737e7d">[email protected]</a>/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=341488f6f4dc7bc8d6232b06730e304ed655bd4a944<b>1a90eb2ab81ac92a0568&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>

Keep in mind that your layout may not be fully responsive. Include breakpoint classes.

Answer №3

Check out this suggestion:

.resort-image img{
    max-width: 100%;
}

Answer №4

To achieve the desired result, simply add 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning text vertically within an HTML <a> tag block

Calling all CSS experts! I'm struggling with aligning text to the bottom of a block element with a fixed width and height that contains a background image and a title. I've tried using display: table-cell; and vertical-align: bottom; without succ ...

htmlcsstagsvertical-alignment

Is there a way to enable a clickable imagemap area using jQuery?

Example showcasing different behaviors in various browsers (jsfiddle link): <!DOCTYPE html> <html> <head> <title>Browser Behavior Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...

jqueryhtmlcssimagemap

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

htmlcss

Arranging input elements horizontally

this issue is connected to this post: Flex align baseline content to input with label I am grappling with the layout of my components, specifically trying to get all inputs and buttons aligned in a row with labels above the inputs and hints below. The CSS ...

htmlcssangularweb-component

Change the position of an array element when displayed on an HTML page

I'm trying to figure out a way to manipulate the position of an HTML element that is stored inside an array. The issue I am facing is that my code generates a new div every time a specific function is called, and this div has a class applied to it for ...

javascripthtmlcss

Combining Bootstrap Vue: utilizing class names alongside HTML tags

(Bootstrap-Vue 2.0, Vue.js 2.5) Is it possible to combine traditional CSS Bootstrap 4 classes with Bootstrap-Vue? For example, can I use the following code snippet: <section id="introduction"> <b-container class="h-100"> & ...

cssvue.jsbootstrap-4bootstrap-vue

The height of a div element does not automatically default to 100% in Next.js

I'm encountering an issue with styling pages in next.js. My goal is to create full-height pages. Although I've successfully set the height attribute in the body and html tags to achieve full height (verified in dev tools), I'm struggling to ...

htmlcssnext.js

I'm new to Angular and I'm wondering how to close the panel by clicking on the 'x' button and also by clicking on the screen. Can anyone help me with this

Below is the HTML code I use for my button: <button class="btn btn-outlined " ng-click="vm.showCommentBox1()">Notify All</button> <div class="comment-box custom saveAll" ng-if=""><div class="panel panel-default"> ...

javascripthtmlcssangularjs

Including code that is tailored specifically for the Internet Explorer browser on Windows Phone devices

While testing the Google Maps API on different browsers and devices, I encountered issues with Windows Phone. It turns out that Google Maps is not supported on Windows Phones, resulting in errors. How can I set it up so that instead of displaying the map ...

javascriptcssgoogle-mapswindows-phone-8

Tips on implementing taxonomy-driven CSS styling with Drupal's template.php file?

Currently, I am excited about incorporating CSS styling based on taxonomy terms, particularly for the body tag where I aim to include the current terms. Here is my progress so far : function _phptemplate_variables($hook, $vars = array()) { global $no ...

cssdrupaltaxonomy

Looking to transform an HTML table into a stylish CSS layout complete with a form submission button?

Recently, I've been delving into the world of CSS and PHP as I work on converting old code entirely into HTML and PHP with a touch of CSS. The visual aspect seems fine, but I've hit a roadblock with the submit form due to an IF statement in PHP. ...

javascriptphpjqueryhtmlcss

Continuously animate a series of CSS properties

Here's the code snippet I'm working with: @keyframes ball1 { 0% { transform: translateX(0px); opacity: 0%; } 50% { opacity: 100%; } 100% { transform: translateX(120px); opacity: 0%; } } @keyframes ball2 { 0 ...

javascriptcssanimation

Changing the src attribute of an <img> tag using Jquery seems to be unresponsive

Hey everyone, I created a simple slider using JqueryUI. When the value falls within a certain range, I generate an Image URL and then attempt to change the src attribute. I am attempting to modify four images. You can view the jsFiddle here. I believe t ...

javascriptjqueryhtmlcssjquery-ui

There is a space separating the slider image and the navigation bar

Having a small space between the slider image and the navigation bar is causing some issues. I've tried various solutions like minifying the code, adjusting margins, and setting line heights to zero but nothing seems to be working. One question I have ...

htmlcss

Is there a way to ensure that an image is always smaller than the section it resides in?

Currently, I am in the process of designing a Tumblr theme and have encountered an issue with the avatar image being displayed next to the content. The problem is that the image is larger than the section it's supposed to be contained in, causing it t ...

htmlcss

How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

I need help figuring out how to blur the background image of my jumbotron without blurring the text on top. <b-container fluid class="text-center"> <div> <b-jumbotron class="jumbotron"> <p style=& ...

cssvue.jsbootstrap-4bootstrap-vue

Tips for minimizing the arrow size in the infowindow on a Google Maps interface

As a newcomer to customizing Google Maps, I am looking to decrease the size of the arrow in the infowindow and position it in the bottom left corner for a better appearance. I am struggling to figure out how to adjust the height and width of the arrow and ...

jquerycssgoogle-mapsgoogle-maps-api-3

What are the steps for enlarging the display containing components with the 'position: absolute' style?

How can I magnify the screen with the following code? .drawing-board { width: 25%; height: 25%; background-color: black; position: relative; /* transform: scale(2, 2); */ } .drawing-board .box-1 { width: 20px; height: 20px; background-c ...

javascripthtmlcss

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

javascripthtmlcssgoogle-chrome

Steps for designing a footer with a fixed width and transparent center gap that stays in place

Looking to create a fixed footer with a transparent gap at the center that is 100% fixed width? No scripts needed! EXPAND THIS WAY <<< ______ FIXED WIDTH GAP ______ >>> EXPAND THIS WAY MY OWN SOLUTION HTML <div id="Ftr"> ...

htmlcsssticky-footer