Home Image Stretching in responsive design
Reply: 2

Image Stretching in responsive design

satheesh Published in 2017-09-14 09:39:52Z

I am having an image in different size. All having huge size images. I need to show the image without any stretch inside a container. That container had some height. So I have show the image to fit inside the container without any stretch. I need to use image in html not as background image. Here is my code

.image-container {
  height: 420px;
  width: 100%;

@media (max-width: 480px) {
  height: 310px;

@media (max-width: 375px) {
  height: 275px;

@media (max-width: 320px) {
  height: 240px;

.image-container img {
  max-height: 100%;
  object-fit: contain;
  max-width: 100%;
  display: block;
  margin: 0 auto;
<div class="image-container">
  <img src="http://media.gettyimages.com/photos/under-the-tree-picture-id480585809" />

When I use above code image is stretching. Is there any way to fix this? Please suggest any solution for this.

Thanks in Advance.

Georgi Antonov
Georgi Antonov Reply to 2017-09-14 10:45:28Z

Always reset the margins and paddings of all elements first.

 * {
    margin: 0;
   padding: 0;

If height or width is auto it will not stretch / mutate the original image.

.img-container {
    width: 420px;    // your width

.img-container img {
    width: 100%;
    height: auto;
    display: block;

Remove the media queries. Your syntax is incorrect the correct syntax for using them is :

@media (max-width: 480px) {
  .img-container {
      // some changes in the class props
   .another-class-change-for-480px-max-width-of-screen {

Abdul Malik
Abdul Malik Reply to 2017-09-14 12:52:42Z

use max-width instead of width in your css to avoid stretching

.img-container img{ max-width:100%; height:auto;}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305089 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO