How to make images auto resize when resize browser window using css?

Question

I want images auto size when users resize browser window, when users resize their browser i don't want images lose any details. I only want resolution width:800px height:400px

I did my best and searched everywhere but their solution didn't work for me, i also put width 100% and max-width 100% still my webpage didn't work.

If anyone would like to gives me some advices i would very appreciate your help thank you.

Please take a look at my code.

/*slideshow*/
#slideshow {
    width: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}

.slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 800px 400px;
    width: 100%;
    height: 400px;
    max-width: 100%;
    max-height: 100%;
    margin-top: 40px;
    border: 1px solid;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    
    <div id="slideshow">

        <div id="slide1" class="slide">
            <span class="slidecontain">SlideImage1</span>
        </div>

        <div id="slide2" class="slide">
            <span class="slidecontain">SlideImage2</span>
        </div>

        <div id="slide3" class="slide">
            <span class="slidecontain">SlideImage3</span>
        </div>

    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>


</body>
</html>

caiovisk · Accepted Answer · 2018-07-12 03:41:04Z

1

Set your .slide as background-size: cover.

See docs: https://www.w3schools.com/cssref/css3_pr_background-size.asp

Also you can position it background-position: center center;

To keep your slide as the same size of the image you can set your padding bottom to have same ratio proportion of the image, something like:

.slide {
   ...
   padding-bottom: 72%;
}

/*slideshow*/
#slideshow {
    width: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}

.slide {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin-top: 40px;
    border: 1px solid;
    padding-bottom: 72%;
  }

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    
    <div id="slideshow">

        <div id="slide1" class="slide">
            <span class="slidecontain">SlideImage1</span>
        </div>

        <div id="slide2" class="slide">
            <span class="slidecontain">SlideImage2</span>
        </div>

        <div id="slide3" class="slide">
            <span class="slidecontain">SlideImage3</span>
        </div>

    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>


</body>
</html>

edited Jul 12, 2018 at 3:41

answered Jul 12, 2018 at 3:23

caiovisk

3,8281 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

saranyuquest Over a year ago

I tried your code but its still losing details of images

caiovisk Over a year ago

Its cutting details because you have fixed height on your slide.

saranyuquest Over a year ago

Can you more clarify for me please ? So, is there a way to resize without losing any details of images ? @caiovisk

caiovisk Over a year ago

Yeap, using padding-bottom to match up the ratio of the image, see my updated answer.

saranyuquest Over a year ago

but i just want resolution at 800px 400px when i try to change it didn't work. Maybe there is some way to make it with losing details ?

|

Piyali · Accepted Answer · 2018-07-12 04:40:22Z

Here is the correct code after hard work:

#slideshow {
    width: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slidebg{
	width: 100%;
    height: 100%;
    float:left;
    margin-top: 40px;
    border: 1px solid;
    position: relative;
}
 .slidebg:before {
 	content: "";
    display: block;
    padding-top: 50%;
}
.slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
 }

<div id="slideshow">

        <div class="slidebg">
        	<div id="slide1" class="slide">
                  <span class="slidecontain">SlideImage1</span>
            </div>      
        </div>

        <div class="slidebg">
        	<div id="slide2" class="slide">
            	<span class="slidecontain">SlideImage2</span>
            </div>    
        </div>

        <div class="slidebg">
        	<div id="slide3" class="slide">
            	<span class="slidecontain">SlideImage3</span>
            </div>    
        </div>

    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>

Collectives™ on Stack Overflow

How to make images auto resize when resize browser window using css?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related