What is the best way to ensure that an image perfectly fits within a div container?

My goal is to make my image occupy half of the div's width and 100% of the height. However, I am facing an issue with a lingering white bar at the bottom. Can you offer some guidance on how to resolve this?

Take a look at the site preview

.container {
  background-color: white;
  height: 90%;
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

img {
  max-width: 100%;
  border-radius: 8px;
}

\#description {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
<main>
  <div class="container">
    <div id="photo">
      <img src="https://via.placeholder.com/300">
    </div>
    
    <div id="description">
      <div id="header"> P E R F U M E</div>
      <h2 id="name">Gabrielle Essence Eau De Parfum</h2>
      <div id="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</div>
      
      <div id="price">
        <div id="newprice">$149.99</div>
        <div id="oldprice">$169.99</div>
        <button id="add">Add to Cart</button>
      </div>
    </div>
</main>

I have experimented with the max-width and max-height properties, but unfortunately, I have not been able to find a solution. Any suggestions would be greatly appreciated.

htmlcss

Answer №1

To resolve the issue of white space in the image, simply add the CSS property font-size: 0 to the image container. Below are two code snippets for comparison, one with white space and the other without.

.container {
  background-color: white;
  height: 90%;
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

#photo {
  background: #000;
}

img {
  max-width: 100%;
  border-radius: 8px;
  height: 100%;
}

\#description {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
<main>
  <div class="container">
    <div id="photo">
      <img src="https://via.placeholder.com/300">
    </div>

    <div id="description">
      <div id="header"> P E R F U M E</div>
      <h2 id="name">Gabrielle Essence Eau De Parfum</h2>
      <div id="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</div>

      <div id="price">
        <div id="newprice">$149.99</div>
        <div id="oldprice">$169.99</div>
        <button id="add">Add to Cart</button>
      </div>
    </div>
</main>

Solution

.container {
  background-color: white;
  height: 90%;
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

#photo {
background: #000;
font-size: 0;
}

img {
  max-width: 100%;
  border-radius: 8px;
}

\#description {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
<main>
  <div class="container">
    <div id="photo">
      <img src="https://via.placeholder.com/300">
    </div>

    <div id="description">
      <div id="header"> P E R F U M E</div>
      <h2 id="name">Gabrielle Essence Eau De Parfum</h2>
      <div id="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</div>

      <div id="price">
        <div id="newprice">$149.99</div>
        <div id="oldprice">$169.99</div>
        <button id="add">Add to Cart</button>
      </div>
    </div>
</main>

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

How can one retrieve the 'alt' attribute text from an image tag on a webpage using the JSOUP library in an Android application?

Extracting the 'alt' text from an 'img' tag in Android after clicking a button is causing issues. The attempted code is not working as expected. Here is the snippet of the code that was used: Document doc = Jsoup.connect(url).get(); ...

javaandroidhtmlweb-scrapingjsoup

Generate three separate inline blocks and position elements within them without any impact on the neighboring blocks

In my attempt to create three blocks with set height and width, aligned on top/bottom with a couple of elements inside each one, I encountered an issue. Whenever I add additional DIVs to one of the elements (resulting in a different number of DIVs inside e ...

htmlcsstwitter-bootstrapbootstrap-5

Sliding and repositioning elements using jQuery

My goal is to build a simple slideshow for learning purposes. I want the list items to slide automatically to the left in a continuous loop. I've written some code that makes the slides move, but I'm struggling to set the correct position for ea ...

javascriptjqueryhtmlcss

Troubleshooting Bootstrap select box design discrepancies

Currently revamping a website and encountered an unusual issue with select boxes. There seems to be an overlapping white space where the option values should be. Here's a visual reference: View Image of Select Box Issue Utilizing Bootstrap for the re ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is preventing me from being able to import a React component from a file?

I've double-checked my code and everything seems correct, but when I view it on the port, only the app.js file is displayed. import React from 'react'; import ImgSlider from './ImgSlider'; import './App.css'; function ...

javascripthtmlreactjsjsx

Div element obstructing the ability to view markers

Issue with a positioned DIV over Google Maps: The DIV is causing accessibility problems for the map, taking up the entire width when it should stop at the green square borders. Interaction with the map is limited to the very bottom after the green square. ...

htmlcssgoogle-maps

Creating glitchy dotted lines in an HTML Canvas with the help of translate and scale techniques

I'm working on creating a canvas where users can draw symmetrical lines with their mouse. However, when I use the transform and scale attributes in the draw function to achieve this effect, it creates small gaps in the line and makes it look less smoo ...

javascripthtmlcanvas

Creating floating images in AngularJS is a simple process that can add visual interest

As someone new to the world of AngularJS, I have been amazed by the stunning image animations on certain websites. I am eager to incorporate similar features into my own site. If anyone can offer guidance on how to achieve this, I would greatly appreciate ...

htmlangularjsimagecssjsp

calculating the duration between successive PHP form submissions

I am trying to calculate the duration between when a user submits a PHP form and when they submit it again. The form reloads on the same page, essentially refreshing it. Additionally, the user may enter the same data again. I want the timer to start runnin ...

javascriptphppythonhtmljson

Limitations on Embedding Videos with YouTube Data API

I have been using the Youtube Data API to search for videos, but I am encountering an issue with restricted content appearing in the results. Specifically, music videos from Vevo are showing up even though I only want videos that can be embedded or placed ...

javascripthtmljsonapiyoutube

Create an alert box that covers the content

I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it ...

csssassbootstrap-5

Exporting an HTML table to Excel with JavaScript runs into issues when it encounters the '#' character

Looking for a JavaScript solution to export HTML tables to Excel. I attempted a script that exports tables, but it stops when encountering special characters like '#'. Can someone assist me with this issue? Thank you in advance. <script src= ...

javascripthtmlexcel

Personalizing Bootstrap Styles Using Sass

As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way... When it comes to customizing Bootstrap Sass, I understand the concept of variable overrid ...

htmlcsssassbootstrap-5

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

I am currently working on creating an animation for a collapsible box (accordion). My goal is to have the child component initially hidden with display:none. When I hover over the parent component, the child should be revealed and the dimensions of the pa ...

javascriptcssreactjsfrontendtailwind-css

Issue with header background images not showing up in Safari browser

On my website, the top header background and the background of the "Kreation Team" Div are not appearing on Safari for iPads and iPhones, but they are visible on iMacs and MacBooks. The background images do not show up on smaller devices. If you compare C ...

htmlcsstwitter-bootstrapmobile-safari

The auto-fill feature in Chrome mistakenly inputs the saved username in the wrong field

My web application, coded in HTML/PHP with a login screen, is encountering an issue with Chrome users. After logging in and navigating to the home page, some users are prompted to save their password. This leads to the username appearing in a field unrelat ...

htmlgoogle-chromeautofill

Determine whether to deliver compressed or uncompressed js and css files by utilizing url parameters in AngularJs and Grunt

Exploring the world of AngularJS and Grunt is a new adventure for me. I am currently in the process of setting up the front-end environment and am looking for a way to serve either compressed or uncompressed js and css files based on specific url parameter ...

javascriptcssnode.jsangularjsgruntjs

The collapse of HTML elements converging inwards within the Bulma Framework and customized with SASS

Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...

htmlcsssassbulma

What is the best method for sending data from an HTML page to a Django view in order to utilize it

I'm encountering an issue with Django urls. I need to pass the value entered in the Name input field after clicking the submit button. Let's assume I have the following HTML form- <form method='POST' action="{% url 'submittedf ...

htmldjangoview

Is it possible to target the last child element in CSS without relying on nesting

Is there a way to select the very last child of an element and apply a specific class without using nesting? For instance, how can I target only the final div in the structure below, nothing more and nothing less. <body> <div class="very-last- ...

csssass