Can't resize image using CSS

Question

I've tried every answer I could find on all the sites I could find, but still haven't been able to properly resize an image using CSS. I've got it inside a div, and tried resizing either one and resizing both. I'm trying to fit the image (underneath my navigation bar) to the page (meaning: as wide as the page, and relative height).

<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>

First attempt:

.myImage{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

Second attempt:

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

Third attempt:

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

#myImage{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

What goes wrong with your attempts? Seems to work fine for me. — showdev
– showdev, Commented Jul 29, 2014 at 20:46
Have you considered width:100%? You seem to have only tried max-width. — Serlite
– Serlite, Commented Jul 29, 2014 at 20:46
can you publish one screenshot or the image you're trying to resize? — martinezjc
– martinezjc, Commented Jul 29, 2014 at 20:49

Jose Magana · Accepted Answer · 2014-07-29 20:47:16Z

6

If your image is smaller than the screen, it will use the image width. If it is bigger, it uses max-width. So assuming your image is smaller than the display, you want to change your "max-width" to "width" to increase the image size.

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

#myImage{
    width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

answered Jul 29, 2014 at 20:47

Jose Magana

9513 gold badges10 silver badges24 bronze badges

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

1 Comment

Maxim Zhukov Over a year ago

@JoseMagana, i hope it so ;)

Milkmannetje · Accepted Answer · 2014-07-29 20:51:36Z

1

The CSS property background:cover will help you!

html { 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 background-size: cover;
}

Cover will extend your background to full screen.

answered Jul 29, 2014 at 20:51

Milkmannetje

1,1812 gold badges10 silver badges36 bronze badges

Comments

Jon Thoms · Accepted Answer · 2019-10-09 21:16:20Z

0

CSS-Tricks has the best solution for this that I could find

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Link to CSS-Tricks for the source and original code: https://css-tricks.com/perfect-full-page-background-image/

edited Oct 9, 2019 at 21:16

Jon Thoms

10.9k8 gold badges54 silver badges74 bronze badges

answered Oct 8, 2019 at 2:16

Tyler Hurst

12 bronze badges

1 Comment

Jon Thoms Over a year ago

Consider adding a link to the original source where you found this solution so that they can be properly cited/credited.

TheCodeGeek · Accepted Answer · 2020-11-06 20:33:46Z

0

Did you remember to link to your stylesheet? I was just having this issue, then I realized that I forgot to link to the CSS and face-palm.

answered Nov 6, 2020 at 20:33

TheCodeGeek

1478 bronze badges

Comments

Michelle · Accepted Answer · 2017-06-04 23:11:53Z

-1

You have to give the id banner a specific width that is less than 100%. You don't need a height, it already is automatic. You have to target the image inside the banner and not the class added to the image. So it should look like this:

<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>

#banner{
    width: 60%;
    left: 0px;
    right: 0px;
}

#banner img{
    width: 100%;
    left: 0px;
    right: 0px;
}

answered Jun 4, 2017 at 23:11

Michelle

1

Collectives™ on Stack Overflow

Can't resize image using CSS

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related