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

JSFiddle showcasing the Bootstrap grid system

I'm having trouble implementing bootstrap's grid system on jsfiddle. Check it out on jsfiddle I've tried using the example from the bootstrap documentation: <div class="row"> <div class="col-md-1">.col-md-1</div> ...

csstwitter-bootstrapgrid-layout

Does a browser's cache utilize storage for XMLHttpRequest responses?

I have a question regarding browsers in general, with a focus on Chrome. Imagine I have the following code snippet in my file, index.html: <img src='//path/to/foo.img'></img> The file foo.img changes on my server every hour. I woul ...

javascripthtmlcssgoogle-chromecaching

Increasing and decreasing the display of content using JQuery based on height rather than character count

I'm attempting to create a show more/show less link with a set height of 200px that, when clicked, will reveal the rest of the content. Anything exceeding 200px will be hidden, and there will be a "show more" link to display the remaining text. I&apos ...

javascriptjqueryhtmlcss

What causes certain CSS properties to scroll while others remain fixed?

I am experiencing a strange issue with my table. I am utilizing the tableHeadFixer jQuery plugin to create a fixed header with a scrollable table body. In my CSS, I have a class called table which is defined as follows: .table thead { color: blue; ...

jqueryhtmlcsstwitter-bootstrap

Experience the magic of Materialize CSS SideNav

I'm currently attempting to implement the mobile side navigation provided by Materialize. I've managed to display the menu icon, but when I click on it, nothing happens. It seems like the function is not being triggered, and there are no errors s ...

jqueryhtmlcssangularjsmaterialize

Utilizing Bootstrap 4 to create fixed and fluid width side-by-side divs with scrollbars

I want to create a basic dashboard page. I decided to arrange two divs next to each other to serve as the side menu and content. Here is what the layout looks like: https://i.sstatic.net/EATK6.png I encountered an issue where the vertical scrollbar is n ...

csshtmltwitter-bootstrapbootstrap-4dashboard

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

htmlcss

What causes CSS to fail to load in React but work normally in Next.js?

We are currently experiencing an issue with a component located in a Git Submodule that is being used by both Next.js and React. While everything is functioning correctly in Next.js, React is unable to accept the way the CSS is being loaded: import styles ...

javascriptcssreactjs

Insert the <span> element within the <a> element with the help of Jquery

I am attempting to insert a span tag inside .block-leftnav ul li .parent a, however, instead of adding the tag after only the .parent a, jQuery is adding the span tag after every href tag on my page. Below is the code I am using to achieve my desired outc ...

javascriptjqueryhtmlcss

Tips for displaying data by using the append() function when the page is scrolled to the bottom

How can I use the append() function to display data when scrolling to the bottom of the page? Initially, when you load the page index.php, it will display 88888 and more br tags When you scroll to the bottom of the page, I want to show 88888 and more br ...

javascriptphpjqueryhtmlcss

Ideal C++ tool for displaying a non-changing HTML page

I am looking to develop a simple cross-platform C++ project for displaying HTML pages, like an application that showcases help materials. These pages may contain images and styles (CSS embedded in HTML). I am researching the best way to incorporate the fol ...

htmlc++cssqtzooming

Trouble with implementing a stationary header for a table on IE9?

I have successfully created a table with a fixed header and scrollable content. I utilized CSS classes "fixedHeader" for thead and "scrollContent" for tbody: thead.fixedHeader tr { position: relative; } html > body thead.fixedHeader tr { displa ...

htmlcss

Unique twist on the Bootstrap grid: perfectly centered

I'd like to design a 12-column Bootstrap grid with specific colors. The header should be light blue, the body in green, and the footer orange against a grey background. I want the grid to be centered on the screen with horizontal light blue stripes m ...

twitter-bootstrapcss

The issue of stuttering arises in Safari when using a combination of size and translate transitions

When applying transitions to an element and adjusting the width and/or height along with -webkit-transform:translate3d, there is a noticeable stutter in the transition animation. It seems like the width/height change is animated first, then partially trans ...

csssafaritransformcss-transitions

Is it possible to nest CSS Variables within CSS Variable names?

Is it feasible to embed a CSS Variable inside another CSS variable's name or perform a similar action like this: :root { --color-1: red; --index: 1; } span { color: var(--color-var(--index)) } ...

csscss-variables

Choosing a Radio Button with a Labeled Option

I'm experimenting with a method to style radio buttons by concealing them and inserting an alternative image as the background of the corresponding label (similar to this technique). In my test, I attempted to apply CSS to the radio button label: inp ...

htmlruby-on-railscssradio-button

Issue with connecting Drupal 8 theme styling to website pages

Although the theme is functioning properly, the CSS styles are not being applied. Even when inspecting the developer console in Firefox, there seems to be a disconnect with the page. I verified that manually applying the CSS through the developer console i ...

htmlcssdrupaldrupal-8

What is the deal with CSS relative magnification?

I am currently utilizing a PHP styleswitcher along with alternate stylesheets in an attempt to replicate the functionality of browser zoom (done using keyboard shortcuts cmd-plus or ctrl-plus). At the moment, when clicking on the "zoom in" graphic, it is ...

csszooming

What is the best way to ensure that the buttons remain in place once they have been clicked to reveal a drop-down menu?

Is there a way to keep 3 buttons inline and prevent them from moving when clicked to open a submenu? Changing their positions results in them stacking on top of each other. Any help or suggestions would be greatly appreciated, thank you! Here is the code ...

javascriptjqueryhtmlcss

Tips for styling a datatable scrollbar with CSS

My preference is to utilize the datatable API when creating tables. $('#datatable-example').dataTable({ "scrollX": true, "info" : false, "fnDrawCallback" : function(oSettings) { $('td').removeClass('sor ...

jquerycssdatatable