Images are too stretched in html/css

fit image to div without stretching
css resize image to fit div
resize image without stretching css
html background image size to fit
stretch image css
background image css
object-fit
object-fit not working

My background images are all too stretched width wise and I have tried countless things to try and make it work. I have changed width parameters, height parameter, looked on different sights for answers, and could not find anything that worked. The pictures are background images and are in an animation to fade through the images. I am using Google Chrome as the browser and pictures that I have on my desktop. I found some pictures online to add in the snippet.

#crossfade > img {
    width:100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s;
}

#crossfade > img:nth-child(2)  {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
<html>
  <div id= 'crossfade'>
    <img src="https://www.gstatic.com/webp/gallery/1.jpg">
    <img src="https://www.gstatic.com/webp/gallery/2.jpg">
    <img src="https://www.gstatic.com/webp/gallery/3.jpg">
    <img src="https://www.gstatic.com/webp/gallery/4.jpg">
   </div>




</html>

This is due to image aspect ratio. Instead of adding img element add a div element with a background-image. you can then play with the height, position accordingly. It will keep your aspect ration intact. Please see the below solution or run it in codepen https://codepen.io/salinaacharya/pen/PVowPz

    <html>
  <div id= 'crossfade'>
   <div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/1.jpg)">
    </div> 
    <div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/2.jpg)">
    </div>
    <div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/3.jpg)">
    </div>
    <div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/4.jpg)">
   </div>
  </div>
</html>

#crossfade > .image-box {
    width:100%;
    height:500px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

#crossfade > .image-box:nth-child(2)  {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
#crossfade > .image-box:nth-child(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
#crossfade > .image-box:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
#crossfade > .image-box:nth-child(5) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

CSS object-fit Property, building tutorials with lots of examples of how to use HTML, CSS, JavaScript, If we use object-fit: cover; it will cut off the sides of the image, preserving the so when we resize the browser window, the aspect ratio of the images will be destroyed: If necessary, the object will be stretched or squished to fit; contain - The  Here is an example that uses a background image for the body of a page and which sets the size to 100% so that it will always stretch to fit the screen. This method isn't perfect, and it might cause some uncovered space, but by using the background-position property, you should be able to eliminate the problem and still accommodate older browsers.

You need to remove the property width or height from your #crossfade element in order the have a correct scaling, you can set min-width and min-height in order to achieve the full screen mode that you're looking for, although you might lose some of the image visibility.

#crossfade > img {
    min-width: 100%;
    min-height: 100%;
}

CSS Image size, how to fill, Avoid stretch on image css, This you can do with max-width CSS property. You give the max width of of img tag as 100% or slightly less i.e. 98%. So your Final Code: <  It does exactly what I want it to do, but the only problem is that if the images aren’t all the exact same height they stretch and become distorted when browsing through the gallery. So maybe this is a jQuery problem, not CSS…? View this page and try clicking the second or third image in the gallery on the bottom of the page…

Try adding object-fit: cover to the image

#crossfade>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  opacity: 0;
  z-index: -1;
  animation: imageAnimation 30s linear infinite 0s;
}

#crossfade>img:nth-child(2) {
  animation-delay: 6s;
}

#crossfade>img:nth-child(3) {
  animation-delay: 12s;
}

#crossfade>img:nth-child(4) {
  animation-delay: 18s;
}

#crossfade>img:nth-child(5) {
  animation-delay: 24s;
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
<div id='crossfade'>
  <img src="https://www.gstatic.com/webp/gallery/1.jpg">
  <img src="https://www.gstatic.com/webp/gallery/2.jpg">
  <img src="https://www.gstatic.com/webp/gallery/3.jpg">
  <img src="https://www.gstatic.com/webp/gallery/4.jpg">
</div>

How to fix an image in a div without stretching it (if the image size is , I hate to bother you guys with this, but it's driving me crazy… Im helping my Dad build a portfolio website… so far so good. I decided to use a  Resize image proportionally with CSS The resize image property is used in responsive web where image is resizing automatically to fit the div container. The max-width property in CSS is used to create resize image property. The resize property will not work if width and height of image defined in the HTML.

Stretched Image Problem, However, part of the image may not be visible (cropped either vertically or horizontally) if the width or height of the resized background image is too large from the  I had image stretch on the cross-axis (stretch in height, using flex-direction: row). This Stack Overflow Q/A helped me solve it: Link here. I had to set the following CSS on my img: align-self: flex-start; You might need another value than flex-start of course, depending on your goal. Mine is to have my image be at the top of the row.

How to Stretch and Scale an Image in the Background with CSS, Learn how to add a CSS reference to an image and you can stretch it Add “​class=”stretchX” after the word “img” so that your img tag looks similar to the one​  I think align-self: start; may be a stronger answer because images should vertically align to the TOP of their containers (not center) like any styleless image (no css) would. Either way, both answers fix the stretching.

How to Stretch an Image Horizontally With CSS, The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling By doing so, you can scale the image upward or downward as desired. Stretching an image. Responsive Images. Responsive images will automatically adjust to fit the size of the screen. Resize the browser window to see the effect: If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Comments
  • Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example.
  • Remove either width:100% or height:100%.
  • i tried this and tweaked it a little and it worked. Such an easy fix i don't know how I didn't think about it sooner. Thanks for the help