Vertically align an image of unknown height using CSS, ensuring compatibility with IE9

.box {
    width : 100%;
    max-height : 300px;
    overflow : hidden; 
}

img {
     width : 100%;
    }
<div class="box">
    <img src="banner.png" />
</div>

I am faced with a challenge regarding the sizing of the image banner.png within the .box element. I want to restrict the height using the max-height property. In case the height of banner.png exceeds this limit, I need to ensure that the img tag is vertically aligned in the middle.

Has anyone encountered a similar issue and found a solution?

htmlcssvertical-alignment

Answer №1

.container{
width : 100%;
max-height : 350px;
overflow : hidden;
}
.container > picture {
    width : 100%;
    max-width:90%;
    vertical-align:center;
}

Answer №2

Try something along these lines.

New and Improved Solutions

.container {
 width : 100%;
 max-height : 400px;
 overflow : scroll;
}
.container img {
 width:150px;
 vertical-align: bottom;
}

Answer №3

Give this flex code a shot

.container{
width : 100%;
max-height : 300px;
display:flex;
align-items: center;
}


.container {
    width : 100%;
    min-height : 300px;
    overflow : hidden;
    border:1px solid green; 
    display:flex;
    align-items:center;
}
<div class="container">
    <img src="http://c5.la4.download.9appsinstall.com:7080/group1/M02/6D/74/pYYBAFhLFviAdm8mAAAWl_5Xbaw477.png" />
</div>

Position-based approach

.wrapper {
    width : 100%;
    min-height : 300px;
    overflow : hidden;
    border:1px solid green; 
    display:block;
    position:relative;
}

.wrapper img {
    position:absolute;
    top:50%;
    transform: translate(0, -50%)
}
<div class="wrapper">
    <img src="http://c5.la4.download.9appsinstall.com:7080/group1/M02/6D/74/pYYBAFhLFviAdm8mAAAWl_5Xbaw477.png" />
</div>

Answer №4

Give this a shot

.container {
    width : 100%;
    max-height : 300px;
    overflow : hidden; 
    display: flex;
}

.container img {
    margin: auto;
}

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

Using JQuery to retrieve part of a className results in a null value being returned

I am facing an issue with a piece of code in codesandbox where it returns null when I attempt to retrieve part of the className from a div using JQuery. How can I troubleshoot this and make it work? Check out the Codesandbox Example import React, { Compo ...

javascriptjquerycssreactjs

Validation (CSS 2.0): The CSS property name 'mso-number-format' is unrecognized and invalid

I am currently tasked with maintaining an ASP .Net application that includes a feature to export HTML tables to Excel. The HTML code includes elements like this: <td style="mso-number-format:\@;"> During the build process, I encounter an error s ...

cssexport-to-excel

Adding a dynamic object to the secondary column header of an output table: A step-by-step guide

Working on a transition table module, my main challenge is presenting the output in a user-friendly manner. In the past, I used Excel for this task, where making the table readable was simple but extracting data from millions of rows took hours. Now with R ...

htmlrshinytransitiondt

Ways to make a div non-clickable disappear without using JavaScript - A guide on "lightboxing" a div

I would like the score's div to pop up as a lightbox when clicking on this link : <a href="#test">TEST</a> However, I do not want it to disappear when clicking on the div itself, only on the black background! Here are my attempts: < ...

htmlcss

Achieving responsive masonry layout with Bootstrap 4

I'm attempting to implement the bootstrap 4 masonry effect on my website, but I'm facing issues with card responsiveness. The page is very basic without any special effects. While the page works well when resizing the browser window, it doesn&ap ...

javascripthtmlcssresponsive-designbootstrap-4

Loading Kendo JS on the client side proves to be rather time-consuming

Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...

cssangularjsuser-interfacekendo-uischeduler

What is the best way to shorten text in React/CSS or Material UI based on the line height multiples?

I'm facing an issue with creating a Material UI card that contains text. My goal is to set a fixed height for the card and truncate the text if it exceeds 3 lines. Can anyone suggest the best approach to achieve this? Here's the code snippet I&a ...

javascriptcssreactjsmaterial-ui

Scss - Only one for mobile devices

Just dipping my toes into scss and I've got a quick question. Here's the snippet of scss code I'm working with: .page { max-width: 1200px; position: relative; width: 100%; ul{ background-color: black; width ...

csssass

How can I use Python Selenium to replicate the styles of elements in Chrome?

Looking at this image, we can manually extract styles using copy > copy styles from Chrome. But is there a way to achieve this using Selenium? https://i.sstatic.net/3XzsT.png Although this guide explains how to obtain the CSS value of a specific eleme ...

pythoncssseleniumgoogle-chrome-extensiongoogle-chrome-devtools

Initialization of webix combo options values in HTML code

Currently, I am working with the Webix UI framework and I am trying to achieve something similar to: <div view="combo" options="fruit"></div> This is what I have in my JavaScript file: $scope.fruit =[{id:1, value: "Apple"}, {id:2, value: "Ba ...

javascripthtmlwebix

How to Vertically Align a div in the Center using Bootstrap 5

Is there a way to horizontally center a div using bootstrap 5? I want the div to be positioned in the middle, between the content above it and the end of the screen. I attempted the following: <div>some content</div> <div class="d-flex ...

htmlcssbootstrap-5

Guide for changing the background color exclusively in the final row of a dynamically-generated HTML table with PHP

<table width="100%"> <tr> <? $count=0; $i=1; foreach($gallery as $key => $list1) { $count++; ?> <td> <img src='<?echo base ...

phphtmlcss

The images are positioned within the middle of the page, directly beneath the sidebar, rather than at the top. (Vue.Js)

I'm currently working on a Vue.JS photo website and I've hit a roadblock as described in the title. Despite trying various solutions, after spending two hours back and forth with ChatGPT, I've decided to seek help here. Below is the code sn ...

htmlcssvue.jscontainersvue-component

Tips for finding information within a table using HTML

My task involves creating a table with the option for users to search data within it. However, I have encountered an issue where I am only able to search for data in the first row of the table. <table style="width:100%" id="table"> <tr> ...

javascripthtml

The button within ng-repeat in HTML is malfunctioning

I am working on importing a customer list and am looking to create a personalized customer page displaying specific information for each customer using the "showit" function. Here is my current setup: <table ng-controller="patientsCtrl" class="table- ...

htmlangularjsonclick

Struggling to create a photo grid design that meets my expectations

I'm struggling to recreate this particular photo grid. Any tips on how I can achieve it? Check out the image here Just to clarify, I had a working prototype see image description using flexbox. However, one image didn't fit well so I resorted to ...

htmlimagecssgridflexbox

When Bootstrap 4 teams up with Autoprefixer, it results in malfunctioning old iPads

.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } Recently, we implemented Bootstrap 4 and the Flex model at my company. We'v ...

cssflexboxbootstrap-4autoprefixer

What is preventing my h1 styles from being applied to an h1 element within a <section> tag?

I have a headline in my header and in another part of the content. I've been told that this can impact SEO, but I'm just starting out by copying other people's pages and trying to replicate their styles without looking at their code. The st ...

htmlcss

What is the process for configuring text on an md-Switch?

I need help setting informational text on an md-switch element from Angular Material design. I want the user to be able to easily understand the current state of a field value. Here is a visual example of what I'm trying to achieve: https://i.sstatic. ...

cssangularjsmaterial-designangular-uiangular-material

Building a GWT webpage from scratch: A step-by-step guide

My project involves creating a website that features various Java tasks and informational content. Users can navigate through different pages by clicking on links from the homepage. Specifically, on the Java page, users will be able to complete tasks. Th ...

htmlgwtuibinder