How to resize this image using simple HTML and CSS

Question

I am trying to resize this responsive image with basic HTML and CSS. It seems as though no matter what I do, nothing will alter the size. Is there something preventing it from being a larger image? I'm teaching myself how to create a webpage and will accept any advice given! Thanks!

HTML

<ul id="gallery">
   <li>
      <a href="img/chicago.jpg">
        <img src="img/chicago.jpg" alt="">
      </a>
   </li>
</ul>

CSS

#gallery{
    margin:0;
    padding:0;
    list-style: none;
}

#gallery li {
    float: left;
    position: relative;
    left: 30%;
    width: 70%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;

}

So... the image isn't stretching to its container?

Sumner Evans
– Sumner Evans

2015-05-12 02:31:19 +00:00
Commented May 12, 2015 at 2:31 — Sumner Evans
– Sumner Evans, Commented May 12, 2015 at 2:31

Jatin · Accepted Answer · 2015-05-12 02:32:16Z

2

The css properties max-width and max-height work great, but aren't supported by IE6 and I believe IE7. You would want to use this over height / width so you don't accidentally scale an image up. You would just want to limit the maximum height/width proportionately.

Working Example

CSS:

img
{
    border:1px solid #000;
width:100%;/*adjust this value to your needs*/
max-width: 400px;/* so it wont get bigger and pixelated*/
height:auto;
}

HTML:

  <a href="img/chicago.jpg">
    <img src="img/chicago.jpg" alt="">
  </a>

answered May 12, 2015 at 2:32

Jatin

3,0876 gold badges31 silver badges42 bronze badges

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

Comments

Quintile · Accepted Answer · 2015-05-12 02:32:02Z

0

img { width: 100% }

You need to set the width of the image.

answered May 12, 2015 at 2:32

Quintile

3432 silver badges6 bronze badges

Comments

Horatio · Accepted Answer · 2015-05-12 02:45:49Z

0

Make sure that the CSS you are writing isn't overwritten by other CSS. If another CSS files that is loaded later changes the image-size, the CSS you wrote prior will have no effect

answered May 12, 2015 at 2:45

Horatio

1,8811 gold badge22 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to resize this image using simple HTML and CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related