Как изменить размер этого изображения, используя простой HTML и CSS

Question

Я пытаюсь изменить размер этого отзывчивого изображения с помощью базового HTML и CSS. Кажется, что независимо от того, что я делаю, ничто не изменит размер. Есть ли что-то, что мешает ему стать более крупным? Я преподаю себе, как создать веб-страницу и буду принимать любые рекомендации! Благодаря!

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; 

} 

Answer 1

img { width: 100% } 

Вы должны установить ширину изображения.

Answer 2

Свойства css max-width и max-height отлично работают, но не поддерживаются IE6, и я считаю IE7. Вы хотели бы использовать это по высоте/ширине, чтобы вы случайно не масштабировали изображение. Вы просто хотели бы ограничить максимальную высоту/ширину пропорционально.

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> 

Answer 3

Убедитесь, что CSS вы пишете не перезаписаны другими CSS. Если другие файлы CSS, которые загружаются позже, изменяют размер изображения, CSS, который вы написали ранее, не будет иметь никакого эффекта