Develop Reference

Html-Css image stretched

I'm building a memory cards game with HTMl, CSS and JS to practice.
This is what I've done so far: https://spomin.krix12.repl.co/
As you can see, the image of the question mark and the image of the flipped card is streched a little bit.
This is the CSS code for it:
.memory-game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 1px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
memory-card is inside memory-game. How can I fix the streched images? Is there a problem in html(I can provide you the code if needed) or css or should I crop the images itself to some ratio?
I would appreciate your help.

1. First solution:
The first column is using div tag in change of img, which could be a non-feasible solution accesibility-wise. This is how I've done it:
<div class="back-face" style="
height: 100%;
background-image: url('slike/emoji-ji/zaprto.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
"></div>
2. Second solution:
Using flex! (as Hades mentioned below)
Put the img inside a div, then make that div a display: flex;, and turn its content to align-items: center;. The image, in turn, needs a few properties to know how to render width and height, which you can adjust to your needs.
<div class="back-face" style="display: flex;align-items: center;">
<img src="slike/emoji-ji/zaprto.png" alt="zaprto" style="
width: 100%;
height: 50%; // or auto
">
</div>
3. Third and best solution:
Let's use what we learned so far, and change a lot of code around! If you want all of them to look like the third one, here's the steps:
Change the CSS:
.memory-card {
width: calc(25% - 10px);
height: auto;
margin: 1px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
/* add the following lines which used to be in img */
border-radius: 5px;
background: #1C7CCC;
display: flex;
align-items: center;
}
.front-face, .back-face {
/* a few things removed */
width: 100%;
position: absolute;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
/* add the following line to keep consistency */
padding: 20px;
}
And resulting html will look like:
<div class="memory-card" data-framework="gospod" style="order: 4;">
<img class="front-face" src="slike/emoji-ji/gospod.png" alt="vesel">
<img class="back-face" src="slike/emoji-ji/zaprto.png" alt="zaprto">
</div>
Barely any minor changes!
Final Thoughts
Remember, using inline style within your html is an antipattern! Make sure to refactor the code provided into your own css classes.

You can keep the images from stretching by only specifying a specific width or height (but not both).
You might want to wrap the images in a div that sizes to the size of the parrent and centers the image within it (For instance by using a flexbox with justify-content: center; and align-items: center;)

css image max-height has no effect unless I change the max-width

I am a fullstack developer but css is my my weak point so I decided to put more effort on it. I have a weird situation and could not figure out why. The issue is I could not adjust the image height and wide properly. I m using reactstrap, bootstrap and scss but i make sure that bootstrap code will not overwrite my css:
import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/main.scss";
here is the part of html:
<Col md="6">
<div className="hero-section">
<div className={`flipper ${isFlipping ? "isFlipping" : ""}`}>
<div className="front">
<div className="hero-section-content">
<h2> Full Stack Web Developer </h2>
<div className="hero-section-content-intro">
Have a look at my portfolio and job history.
</div>
</div>
<img
alt="programming welcome picture"
className="image"
src="/images/original.png"
/>
<div className="shadow-custom">
<div className="shadow-inner"> </div>
</div>
</div>
</Col>
here is the related css code:
.hero-section {
h2 {
color: black;
font-weight: bold;
margin-bottom: 10px;
}
perspective: 10rem;
color: black;
font-weight: bold;
width: 40rem;
position: relative;
&-content {
position: absolute;
bottom: 20px;
width: 360px;
left: 6%;
z-index: 1;
&-intro {
font-size: 17px;
}
}
}
.image {
max-width: 100%;
// background-size: cover;
max-height: 50%;
position: relative;
background-position: center;
}
with this I have this:
however with this .image
.image {
max-width: 100%;
// background-size: cover;
// max-width: 100%;
max-height: 100%;
position: relative;
background-position: center;
}
I have same view. height changes if I change the width but i just want to change the height.
image css i am having this
with this .image
.image {
max-height: auto;
max-width: 100%;
background-position: center;
background-size: cover;
}
i am getting text outside the image :( even though the max-width: 100% it is not as wide as first image :(

[Edit]: I forgot I am the only one on this earth that allowed to have a well working stackblitz so just in case here is the code :
<div className="content">
<h2>FullStack developerdfghbdfg</h2>
<p>Were you looking for something like this ?</p>
</div>
And the CSS part :
.content {
padding: 15px;
padding-top: 200px;
max-width: 200px;
background-image: url('https://picsum.photos/200/300'); /* you need an HD image to do this */
background-size: cover; /* because thiswill strech your image */
color: red; /* pretty disgusting yeah ! */
}
Are you looking for something like this ? Stackblitz example
If not, can you provide the shape of your image please ? I mean, is it a loooong vertical image full of blue, or is it just the boy and screen and books and stuff and a background color set to the same blue for your container ?

why is the text outside the image?
TL;TD: the image is narrower than 40rem.
Here's the too long to read version:
by setting max-width to 100%, the image would allow itself to take 100% of its intrinsic width, but since the height is set to auto, the image width would be dictated by the intrinsic height of the image, making it a fractional width from 100%.
why is image wider and taller from your 1st scenario below?
.image {
// allows the image to take up 100% of its width
max-width: 100%;
// allows the image to take up 100% of its height
max-height: 100%;
...
}
the image is taking up the intrinsic width/height values since the <img> element is a replaced element type and its object-fit css property is not defined.
resolution 1
set div.hero-section to a fixed width and height, like this
.hero-section {
// ie. height/width can be anything you like
height: 20rem;
width: 40rem;
...
}
then set the object-fit property to cover in the .image class
.image {
...
object-fit: cover
}
resolution 2
use the image as a background image. Take out the .img class and the image markup entirely from HTML. Set the .hero-section css like this
.hero-section {
...
width: 40rem;
height: 20rem;
background-size: cover;
background-position: center;
background-image: url("/images/original.png");
...
}
I have a mock of the code in my codesandbox below

Add scrolling to Lightbox2

Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}

Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/

object-fit alternative for ie 11

I have a image in a div. The image is set to fill the screen and scale from center with the following css
.backdiv img{
height:100%;
width: 100%;
display: block;
object-fit:cover;
}
Everything works fine on chrome/safari/firefox. On IE 11 the aspect ratio of the image is not maintained as the image is being forced to be 100% width and 100% and the object-fit is ignored since ie 11 does not support it.
How can i achieve the same on ie 11

you can do away with the img element and style the background style of the containing div
<div id="divbackground" style="position:absolute;top:0;left:0;bottom:0;right:0;background-image:url(myimage.png);background-size:fill">
To make an img element render with its 'natural' aspect ratio, just specify its width or height style to 100%, not both... eg.

This is old question, but I have had the exact same annoying issue where everything worked fine for Chrome/Edge but some css properties did not work in IE11,
I ended up using HTML "figure" element which solved all my problems.
The below code forces the image to reduce nicely(without changing the original aspect ratio).
<figure class="figure-class">
<img class="image-class" src="{{photoURL}}" />
</figure>
and css classes:
.image-class {
border: 6px solid #E8E8E8;
max-width: 189px;
max-height: 189px;
}
.figure-class {
width: 189px;
height: 189px;
}

Recently got the same issue and here is my solution:
.backdiv {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.backdiv img {
position: absolute;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
It looks exactly like object-fit: cover;. Image is centered by using flex layout, you can change image position by changing justify-content and align-items

if ('objectFit' in document.documentElement.style === false) {
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll("img").forEach(function (image) {
if (image.currentStyle['object-position'] || image.currentStyle['object-fit']) {
(image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat ");
if (image.currentStyle['object-fit'])
(image.runtimeStyle || image.style).backgroundSize = image.currentStyle['object-fit'];
if (image.currentStyle['object-position'])
(image.runtimeStyle || image.style).backgroundPosition = image.currentStyle['object-position'];
image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
}
});
});
}
here is a work around to find all the images that have object-fit and object-position for ie

Make image fill div completely without stretching

I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
http://jsfiddle.net/HsE6H/
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
Not sure why I can't get it to work, do I need JavaScript for this?
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)

Auto-sizing Images to Fit a Div - Making the CSS Work
Here is one way of doing it, start with the following HTML:
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
jQuery Helper
You can use the following jQuery action to determine which class to set based
on the aspect ratio of the image.
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<height and then set the appropriate class.
Also, I added a check to take into account the aspect ratio of the containing block.
Before, I had implicitly assumed a square view panel.

For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.

Taking out the line: max-width:100% in your CSS file seems to do the trick.
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/

Here is another solution I found, that no need to seperate portraid or landscape or scripting.
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
https://jsfiddle.net/efirat/17bopn2q/2/

Background can do this
set image as background
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

You should try this:
img {
min-width:100%;
min-height:100%;
}

I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
https://github.com/johnpolacek/imagefill.js/

It works if you add the following to the parent div for img styling;
https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}

This could do the job:
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}

We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.
Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:
.container {
margin: 10px;
width: 125px;
height: 125px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
The key is in using line-height and setting the container to do the same.

I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}
Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.

Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!

The following solution is very short and clean if you need to insert img tag into div tag:
.container, .container img
{
max-height: 300px;
max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>
Also, if you don't need to use a div you can just write an even shorter css:
img
{
max-height: 300px;
max-width: 240px;
}