Another choice for object-fit:contain workaround for IE

Is there an alternative option to object-fit: contain that is compatible with Internet Explorer? Below is a snippet of my code:

.cbs-Item img {
    height: 132px ! important;
    width: 132px ! important;
    object-fit: contain;
<div class="cbs-Item"> <img alt="image" src="" width="146" style="BORDER:0px solid;"> </div>

Any solutions or workarounds for this issue?

Answer №1

To achieve the perfect size, proportions, and centering of an image within a container, clever positioning is key.

For example, you can fit a 350x150px image inside a 132x132px container without any distortion using the following CSS:

.cbs-Item {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
}

.cbs-Item img {
  max-width: 100%;
  max-height: 100%;
}
<div class="cbs-Item">
  <img src="http://placehold.it/350x150" />
</div>

If you prefer, you can also use background-image rather than the img tag for a cleaner implementation:

.cbs-Item {
  background: #eee;
  height: 132px;
  width: 132px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
<div class="cbs-Item" style="background-image: url('http://placehold.it/350x150');"></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

What is the best way to execute code after an element has been included in ngFor in Angular 2+?

Within my component, there is a function that adds an element to an array displayed using *ngFor in the view. After adding the element to the array, I want to target it by ID and scroll to it. However, the issue is that this code runs before the element a ...

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...

Creating a table using Ng-repeat in AngularJS: A Step-by-Step Guide

I'm trying to figure out how to create the table below using ng-repeat. Unfortunately, I don't have permission to modify the json structure so I need to work with it as is. Here's my json: $scope.carCollection = { 'Toyota': [ ...

Having Difficulty Modifying the CSS Styles of a Specific Class

I've been struggling with a CSS styling issue for some time now. The problem lies in targeting the class for the thumbnail preview of vue2-dropzone (which shares similar properties with dropzone.js based on documentation). Each time I upload an image, ...

Sparse planeBufferGeometry in THREE.js is a specialized type of geometry that

I am currently working with a file that contains sparse elevation data derived from GPS information. I have been utilizing this data to fill a PlaneBuffer array with elevations. var vertices = new Float32Array( (grid.NCOL*grid.NROW) * 4 ); for (var i = 0, ...

A guide on retrieving <div> element in a WordPress function PHP file

How can I wrap a div around the output from this code snippet? add_filter( 'the_content', function( $content ) { if (is_singular('cda')) { return get_the_term_list( get_the_ID(), 'cda_cat', 'Product:' ).$con ...

Performing optimized searches in Redis

In the process of creating a wallet app, I have incorporated redis for storing the current wallet balance of each user. Recently, I was tasked with finding a method to retrieve the total sum of all users' balances within the application. Since this in ...

Broadening the capabilities of jQuery through a versatile function

Currently, I am in the process of developing a generic function for my website using jQuery that will be utilized across the entire site to display success or error messages. After careful consideration, I have decided to transform this function into a plu ...

Generate barcodes using Angular 2

Can anyone point me in the direction of an Angular 2 Barcode Generator capable of creating code 128 barcodes? I've been searching but haven't had any luck finding one. If you have any suggestions or can offer assistance, it would be greatly appr ...

Enhance Vaadin 14: Automatically adjust TextArea size when window is resized

Using Vaadin 14.1.19 in a project called "My Starter Project," I attempted to create a TextArea that supports multiple lines. Initially, everything seemed fine, but upon resizing the TextArea, it failed to adjust the number of visible lines. Here is the co ...

After the AJAX request, $this experienced a loss of focus

I am facing an issue with my CakePHP code snippet below: <tr class="tr_clone"> <td><?php echo $this->Form->input('items][',array('label'=>false,'options'=>$items,'class'=>'it ...

Locate the nearest upcoming date and time to today's date in the JSON response

I am currently working with an API that provides a response containing the `start_time` field in JSON format. My goal is to extract the ID from the JSON object whose next date time is closest to the current date and time, excluding any dates from the past. ...

What is the best way to make sure the background color of a container stretches across the full width of the screen?

I am currently learning HTML and CSS, and as a practice project, I am working on building a portfolio webpage. In the image provided, there are two containers, and I am facing an issue with the space on the sides when changing the background color. Despite ...

What is the best method for embedding JSON data into a script tag within a Zope Chameleon template?

Creating a pyramid/python application where the view callable passes in an array variable called data, structured as [[[x1,y1,z1,],...],[[v1,v2,v3],...]] In the view callable: import json jsdata = json.dumps(data) I aim to place this data within a java ...

Unusual actions from the jQuery Steps extension

I am currently utilizing the jQuery Steps plugin (FIND IT HERE). The issue I'm facing lies within an IF statement that is causing the wizard to return to the first step instead of staying on the current indexed step. While all other IF statements are ...

What is the best way to incorporate a style attribute into my EJS page content?

Having trouble with adding custom style. It seems to work, but there's an error displayed. Apologies for my poor english :( <div class="card card_applicant"> <div class="card_title" style="background-c ...

Designing a photo frame slider for a unique touch

My skills in javascript and jQuery are limited, but I am looking to create a customizable slider. While exploring options like Flexslider (), I found it challenging to meet the following specifications: Eliminate color gaps between thumbnails Enable thu ...

The express post request body fails to appear, rendering it empty

Server Side Code const express = require('express'); const app = express(); app.use(express.json()); app.use(express.urlencoded({ extended:true })); app.post('/',(req,res)=>{ console.log(req.body) }) Client Side Code const da ...

Sending data to CSS file within Django

Can variables be passed in CSS files, similar to HTML files? For example: In views.py: def home(request): bgcolor = "#999" ... ... In the CSS file: body { background-color : {{bgcolor}}; } If it is indeed possible, could you please pro ...

An HTML table featuring rows and columns that can be adjusted in size separately from the content within each cell

Looking to create an HTML table where the columns and rows can be sized independently of the cell content? If a row or column isn't large enough to display all the content, it should simply overflow behind the cell. A solution was found that worked in ...