CSS: Масштабирование изображения с помощью темы Tumblr «Астронавт»

Я довольно невежественен в отношении CSS и пытаюсь использовать бесплатную тему Tumblr «Астронавт».

В настоящее время я пытаюсь выяснить, как пропорционально масштабировать изображения для «лица» блога (в трехрядном стиле), сохраняя при этом изображение нетронутым в самих основных сообщениях. Я пытался выяснить, где разместить теги width:300px (хотя это только предположение о максимальной ширине каждой «строки») и height:auto в их блоке, но, похоже, это не работает . Это эксклюзивно для текстовых сообщений, сообщения с изображениями работают нормально.

Сайт для справки.

И вставка макета.

Спасибо за любую помощь, которую вы можете мне дать.


image-scaling css tumblr
person Steven Nunley    schedule 06.02.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте еще раз то, что вы упомянули в своем вопросе, добавив height: auto; в свой CSS:

#container .box img {
    max-width: 100%;
    height: auto; /* add this! */
}

Это должно уменьшить изображение до доступной ширины родительского элемента, если изображение больше и сохраняет правильные пропорции вашего изображения.

person kleinfreund    schedule 06.02.2013