Setting the height of an image within a flexbox while allowing for dynamic width

.flex {
    display: flex;
    align-items: stretch;
}
.dblCol {
    border: 1px solid #999;
    flex-grow: 2;
    min-width: 0;
    padding: 0 10px;
}
.sglCol {
    border: 1px solid #999;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

img {
  max-width: 100%;
  width: 100%;
  height: 150px; /* height can be fix */
}


/* surrounding styles */
body {
  background-color: #ccc;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.app {
    position: relative;
    background-color: #fff;
    padding: 30px 40px 40px;
    margin-bottom: 30px;
}
<div class="content"> 
  <div class="app">
    <div class="flex">
      <div class="dblCol">
        <h3>Teaser #1</h3>
        <img src="https://assets9.domestika.org/project-items/001/654/589/lorem_vector-big.png?1467128294" />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sglCol">
        <h3>Teaser #2</h3>
        <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg"/>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      </div>
    </div>
  </div>
</div>

I'm utilizing the flexibility of flexbox for relative column widths. In this scenario, the right column occupies 33% width while the left column expands to fill the remaining space.

The objective here is to ensure that images inside these columns are displayed with consistent heights, which can be a fixed pixel value. However, the image width should stretch to 100% without distorting its aspect ratio. The goal is to display only the center portion of the image as effectively as possible.

Improper Image Display: https://i.sstatic.net/Un3xo.png

Correct Image Display: https://i.sstatic.net/rBNzE.png

Is achieving this through CSS possible? If so, any hints or suggestions would be greatly appreciated.

htmlcss

Answer №1

Check out this object-fit

It's worth noting that object-fit is not supported in IE.

I included the image image-1 and then applied the CSS attribute object-fit: none

.flex {
    display: flex;
    align-items: stretch;
}
.dblCol {
    border: 1px solid #999;
    flex-grow: 2;
    min-width: 0;
    padding: 0 10px;
}
.sglCol {
    border: 1px solid #999;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

img {
  max-width: 100%;
  width: 100%;
  height: 150px; /* height can be fix */
}

.image-1 {
  object-fit: none; 
}

/* surrounding styles */
body {
  background-color: #ccc;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.app {
    position: relative;
    background-color: #fff;
    padding: 30px 40px 40px;
    margin-bottom: 30px;
}
<div class="content"> 
  <div class="app">
    <div class="flex">
      <div class="dblCol">
        <h3>Teaser #1</h3>
        <img src="https://assets9.domestika.org/project-items/001/654/589/lorem_vector-big.png?1467128294" class="image-1" />
        
      </div>
      <div class="sglCol">
        <h3>Teaser #2</h3>
        <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg"/>
        
      </div>
    </div>
  </div>
</div>

Answer №2

To set it as a background, create a div element and assign the image as the background

     .image-container {
       background: your_image;
       background-size: contain;
       height: 60px; //adjust according to your needs
       background-position: center;
     }

This method should be effective for managing images more easily

Answer №3

A simple solution is to use a wrapper container with overflow set to hidden:

.wrapper{
    overflow:hidden;
    /*additional styles may be added here to adjust the size*/
 }
.wrapper > img{
    width:100%;
 }

Then in your HTML code:

<div class="my-item">
    <div class="wrapper"><img src="my/path.jpg"></div>
</div>

This method should work because the image will take on the width of the wrapper and its height is not restricted.

Answer №4

To ensure the image does not get distorted, apply object-fit: none; to the img

.flex {
    display: flex;
    align-items: stretch;
}
.dblCol {
    border: 1px solid #999;
    flex-grow: 2;
    min-width: 0;
    padding: 0 10px;
}
.sglCol {
    border: 1px solid #999;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

img {
  max-width: 100%;
  width: 100%;
  height: 150px; /* height can be fix */
 object-fit: none;
}


/* surrounding styles */
body {
  background-color: #ccc;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.app {
    position: relative;
    background-color: #fff;
    padding: 30px 40px 40px;
    margin-bottom: 30px;
}
<div class="content"> 
  <div class="app">
    <div class="flex">
      <div class="dblCol">
        <h3>Teaser #1</h3>
        <img src="https://assets9.domestika.org/project-items/001/654/589/lorem_vector-big.png?1467128294" />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sglCol">
        <h3>Teaser #2</h3>
        <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg" />
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      </div>
    </div>
  </div>
</div>

Answer №5

If you ask me, the most effective way is to utilize the image as a background-image.

To achieve this, start by replacing the <img> tag with a <div> tag and then apply the necessary css.

.flex {
    display: flex;
    align-items: stretch;
}
.dblCol {
    border: 1px solid #999;
    flex-grow: 2;
    min-width: 0;
    padding: 0 10px;
}
.sglCol {
    border: 1px solid #999;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
    width: 33.33333333%;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

img {
  max-width: 100%;
  width: 100%;
  height: 150px; /* height can be fix */
}
div.img {
    background-image: url(https://assets9.domestika.org/project-items/001/654/589/lorem_vector-big.png?1467128294);
    height: 150px;
    background-size: cover;
    background-position: 50%; /* you can put the position you want */
}

/* surrounding styles */
body {
  background-color: #ccc;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.app {
    position: relative;
    background-color: #fff;
    padding: 30px 40px 40px;
    margin-bottom: 30px;
}
<div class="content"> 
  <div class="app">
    <div class="flex">
      <div class="dblCol">
        <h3>Teaser #1</h3>
        <div class="img"></div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sglCol">
        <h3>Teaser #2</h3>
        <img src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg"/>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
      </div>
    </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

Styling the scrollbar for the PDF element on an HTML page

I have a div that contains an object "linked" to a .pdf file. Is it possible to customize the scrollbar style using CSS or JavaScript/jQuery? <div id="container"> <object data="document.pdf" type="application/pdf" ...

javascriptjqueryhtmlcsspdf

Disable the :hover functionality for mobile devices

While I have successfully implemented the :hover event on my website, I am facing difficulties when it comes to using this feature on mobile devices. Is there a way to disable this functionality through CSS or JavaScript? Despite numerous attempts, I have ...

javascriptjquerycsssass

When iterating through HTML Elements using the forEach method, the getElementsByClassName function is not capable of targeting these specific elements

Allow me to elaborate, although you will grasp the concept better once you see the actual code. I am retrieving my div elements using the getElementsByClassName function and then converting them into an array using Array.from(). As I iterate through this a ...

javascripthtml

Adjusting Images in HTML

I'm struggling to display 4 images on a single page in the desired sequence, similar to the example below: https://i.sstatic.net/3V1Ru.png Currently, my code only aligns the images to the left-hand side. Here is a snippet of my code: <style> im ...

htmlcssimage

Retrieving width and height of the content block inner in Framework7, excluding navbar and toolbar dimensions

Is there a reliable way to determine the width and height of the page content-block-inner, excluding the navbar and toolbar? This measurement can vary across different devices and operating systems. I attempted to assign an id to the content-block-inner a ...

javascriptjqueryhtmlcsshtml-framework-7

Using jQuery and Ajax for form validation in PHP

My form includes an education section with fields for course type, year of completion, university, and percentage. I have successfully implemented Ajax validation in PHP to validate these education fields. However, I encountered an issue when cloning the e ...

phpjqueryhtmlvalidation

Basic contact form with modal feedback

Hey there, I'm looking for a way to have a regular contact form on my webpage and once it's submitted, display the PHP action in a pop-up modal that says "Thanks for contacting us" before allowing users to close it. I've worked with HTML con ...

phphtmlmodal-dialogcontact-form

Saving the index.html file to disk when the button is clicked

Is there a way to export the current HTML page to a file? I have attempted to achieve this using the following code, but it only works when the page is loaded and not with a button click. <?php // Start buffering // ob_start(); ?> <?php file_pu ...

javascriptphphtmljqueryajax

Ways to create a scrollable div with the help of Javascript

I am currently developing a web app on the Tizen platform. Within my HTML5 code, I have a div element with an image set as its background. In certain scenarios, I need to display random text within this div multiple times. The text can vary in size and ma ...

javascripthtmltizentizen-web-app

CSS Transition - Troubleshooting my malfunctioning code

I seem to be facing a simple issue with my code. The following snippet does not work in Chrome or Firefox, as the transition property is not working properly. Instead of smoothly transitioning from blue to red when hovered over, the element immediately swi ...

csscss-transitions

Set the current time to ISO8601 format

I need assistance with creating a "time passed" counter for my website based on an API call that returns data in the following format: "created_at": "2018-05-16T14:00:00Z", What is the best approach to calculate and display the time that has passed since ...

javascripthtmliso8601

Tips for preserving the contents of a list with HTML and Javascript

My latest project involves creating a website with a To-Do list feature. Users should be able to add and delete items from the list, which I achieved using JavaScript. Now, my next goal is to ensure that the current items on the list are saved when the pag ...

javascripthtmlcss

What is the method to access an HTML page div using JavaScript?

I'm currently developing a login page using phonegap with android. Upon successful login validation, I need the user to be directed to the welcome section if they are authorized. Here is my javascript code from the file called myjavascrpt.js: var ...

javascriptandroidhtmlcordova

css: labeling printed pages in Chrome

I need to make sure my project works on Chrome since I am using electron, so using any other browser is not an option. After searching for a solution to this issue without success, I attempted the following approach (taken from CSS page x of y for @media ...

javascripthtmlcssnode.jsgoogle-chrome

What is the best approach for showcasing overflowing text in tables in a manner that is user-friendly?

I am seeking a solution for dynamically loading data in a table, where I want to wrap long text with ellipsis and display the full content elegantly on hover. Currently utilizing HTML and CSS for this purpose, I have encountered an issue. Even when the tex ...

javascripthtmlcssangularjs

Enhance data table by displaying a set number of rows that do not completely fill the table's height

I'm currently attempting to implement a v-data-table with fixed header and footer. However, I've encountered an issue where if I set the table height to be larger than the row height, the table takes on the defined height and the footer ends up b ...

javascriptcssvue.jsvuetify.jsvuetify-datatable

How can I make <p> elements change color when scrolling?

My Goal https://i.sstatic.net/JbdXR.gif I aim to bring attention to the <p> element as the user scrolls on the page. Initially, the opacity is set to 0.3, but I want it to change to 1 gradually as the user scrolls down. My Attempt window.o ...

javascriptjqueryhtmlcss

Discover the root cause of why an element is being prioritized

Is it possible to determine what is causing the first html element (input, textarea) to gain focus? While loading a modal window, I am unable to locate the line of JavaScript that is setting focus() on this initial element. One workaround is to blur() it ...

javascriptjqueryhtmlajax

Is it a good idea for the poster image to vanish too quickly before the video starts playing in HTML5?

Recently, I implemented a full-width background video on my website at www.sparkengine.tv. While the site is still a work in progress, some users have reported seeing the poster image before it disappears right before the video loads, creating a less-than- ...

javascriptcsshtmlvideo

The TinyMCE extension in Yii fails to load CSS files when accessed through a subdomain

My Yii application located at site.com/module has the tinymce extension installed, but I am facing an issue where the tinymce CSS files are not loading when I access the application through the sub-domain alias module.site.com. Interestingly, all JS file ...

cssyiitinymce