Center an image vertically and horizontally within a div element inside a container, even if the image sizes and aspect ratio differ, while also including padding

I am looking to vertically align images with varying ratios, where the image may be larger or smaller than the content and also include padding;

I have tried different solutions found here, but none seem to cover all my requirements; I specifically need it to work in IE9 and IE10.

.thumb {
border: 2px solid #4FA738;
border-radius: 0.1875rem;
cursor: pointer;
display: inline-block;
font: 0/0 a;
margin: 0 0.5rem 0 0;
transition: 0.2s;
text-align: center;
}

.thumb img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    vertical-align:middle;
    margin:auto;
    padding: 2px;
}
<div class="thumbs">
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/200x100">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/140x100">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/50x50">
  </div>
   <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/150x450">
  </div>
</div>

css

Answer №1

To accomplish the desired outcome using only CSS, consider utilizing the background-image property along with other relevant properties:

.thumb {
  border: 2px solid #4FA738;
  box-shadow: inset 0 0 0 2px #fff; /* Applying a 2px margin/padding trick */
  border-radius: 0.1875rem;
  cursor: pointer;
  display: inline-block;
  font: 0/0 a;
  margin: 0 0.5rem 0 0;
  transition: 0.2s;
  text-align: center;
  width: 70px;
  height: 70px;
}

.thumb {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Maintains the aspect ratio */
}

.thumb:first-child {background-image: url(http://via.placeholder.com/350x150)}
.thumb:nth-child(2) {background-image: url(http://via.placeholder.com/200x100)}
.thumb:nth-child(3) {background-image: url(http://via.placeholder.com/140x100)}
.thumb:nth-child(4) {background-image: url(http://via.placeholder.com/50x50)}
.thumb:last-child {background-image: url(http://via.placeholder.com/150x450)}
<div class="thumbs">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

Alternatively, forgo the border-radius effect in order to implement an alternative approach:

.thumb {
  border: 2px solid #fff;
  outline: 2px solid #4FA738;
  border-radius: 0.1875rem;
  cursor: pointer;
  display: inline-block;
  font: 0/0 a;
  margin: 0 0.5rem 0 0;
  transition: 0.2s;
  text-align: center;
  position: relative;
}

.thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}
<div class="thumbs">
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/200x100">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/140x100">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/50x50">
  </div>
   <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/150x450">
  </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

Having trouble getting my parallax slideshow to work with jquery preventDefault

-UPDATE- After countless hours of online courses, tutorials, and programming, I finally completed my website! Check it out here: The site is almost where I want it to be, but there are a few remaining challenges: 1) AJAX: I'm struggling to get the ...

javascriptjqueryhtmlcssslideshow

"The functionality of the personalized checkbox is not working as expected

Having an issue with my custom checkbox where only the first one gets selected when I select the bottom checkbox. I suspect it might be a styling problem, but I'm unsure. I've recreated the issue in a sandbox for you to check out: https://codesan ...

htmlcssreactjscheckbox

What is the best way to align these two divs centrally within a container set to display as inline-block?

I can't seem to get these two floated left divs centered within a container that has a height set to auto and a display of inline-block. The container has a max-width of 1600px, but when the window is stretched wider than that, it stays aligned to the ...

htmlcss

I am experiencing issues with CSS functionality in my Ruby on Rails application

Currently, I am in the process of creating a blog based on Mackenzie Child's 12 in 12 RoR tutorials. I diligently followed all the steps in the tutorial and adhered strictly to his code. However, I encountered an issue with the CSS stylesheets not be ...

htmlcssruby-on-railsrubysvg

What are the best practices for avoiding text wrapping around a DIV?

I have scoured this site extensively, searching for a solution to my problem. What I thought was a simple issue has left me frustrated after hours of trying to figure it out on my own. So, I've finally admitted defeat and turned to seek help... Here& ...

htmlcssword-wrap

Restrict the dimensions of the image to fit within the div

I've been struggling to resize my LinkedIn logo on my website. I've attempted various methods, like using inherit and setting max height and width to 100%, but the logo keeps displaying at full size. Do I need to use a different type of containe ...

htmlcss

What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images i ...

htmlcssimage

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...

htmlcss

Is it possible to center the image and resize it even when the window is resized?

My goal is to position an image in the center of the screen by performing some calculations. I've tried using: var wh = jQuery(window).innerHeight(); var ww = jQuery(window).innerWidth(); var fh = jQuery('.drop').innerHeight(); var fw = jQ ...

javascriptjqueryhtmlcss

When combining <a> with the class line-through, the line does not appear

I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...

htmlcss

Is one round the limit for my JavaScript image slider?

After studying the JavaScript Chapter on W3Schools, I attempted to create an image slider. Initially, everything worked perfectly for the first cycle. For instance, when I clicked the next button, the slides continued to slide until the end of the slidesho ...

javascriptjqueryhtmlcss

Navigate to the line situated at the exact midpoint vertically

I have a div with child elements, each containing a line of text. <div id="aboutxt"> <div class="line">TEXT_LINE_ONE</div> <div class="line">TEXT_LINE_TWO</div> <div class="line">TEXT_LINE_THREE</div> ...

jquerycss

CSS error with contrasting colors, the reason behind it is unknown

Here is the code snippet I am working on: I have set the background color to #f1f5ff and the font color to #181818. Despite thinking that the contrast is good, I am still encountering an error where the text is not visible. I have tried changing 'c ...

htmlcss

Enhance the appearance of Font Awesome stars by incorporating a hover effect

Is there a straightforward way to make them turn solid yellow when you hover over them? const styles = theme => ({ root: { flexGrow: 1, overflow: 'hidden', padding: theme.spacing(0, 3), }, paper: { maxWidth: 800, mar ...

cssmaterial-uifont-awesome

Items that share identical height and margin values will appear with divergent visual presentations

I am trying to align three horizontal lines so that they are the same height and have an equal spacing between each other. However, due to variations in height and margins, some lines appear larger or smaller than others. How can I ensure they all have th ...

htmlcss

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush ...

jqueryhtmlcss

The nightmare of Parent-Child Inheritance in JQuery/CSS is a constant struggle

Having difficulty implementing specific JQuery effects into a Bootstrap framework due to its extensive CSS causing issues. Created a test file named testjquery.html connected to a stylesheet defining a hidden element and activating the fade in of this ele ...

javascriptjqueryhtmlcsstwitter-bootstrap

What are the steps to ensure that data retrieved from an API is accurately displayed in a table?

My current goal is to collect data from the crypto compare API and display it in a table format. Although I am able to generate the necessary elements and append them to the table body, I am facing an unusual issue. Each time I use a for loop to iterate th ...

javascriptjqueryhtmlcss

Responsive HTML and CSS Image Gallery without Clickable Images

As I embark on the creation of an HTML and CSS based Gallery, I am eager to make my images more interactive by enabling them to expand into full-screen mode upon clicking. Is it necessary for me to incorporate additional plugins to achieve this functiona ...

htmlcssstyling

Tips for saving the visibility status of a <div> in your browser bookmarks?

Currently, I am in the process of developing a single webpage (index.html). The navigation bar at the top includes links to hash references (DIV IDs). If JavaScript is enabled, clicking on these links triggers a JavaScript function with the onclick attribu ...

javascripthtmlcssbrowserbrowser-history