Как сделать отзывчивым по размеру изображение заголовка в шаблоне, с CSS3 или HTML5?

Question

У меня есть Skeleton, если быть точным, и изображение в качестве заголовка, установленное как

<div class="sixteen columns">
<img src="images/shane10in.gif" alt="" />

и хотел бы заполнить ширину и уменьшить. Я мог бы заставить его работать в устаревшей ширине 100% в html, но я пытаюсь найти новый способ сделать это в CSS3 или HTML5, возможно, холст? Пример сайта находится на shaneofalltrades.com.

Answer 1

Это то, что вы ищете? Изменение размера HTML5-холста по размеру окна

ширина: 100% в CSS не рекомендуется.Это для HTML5, но не CSS.Идея состоит в том, чтобы иметь чистый HTML и контролировать многие вещи с помощью CSS.

или вы хотели что-то вроде этого:

.sixteen {
  width: 960px;
  height: 320px;
}

.sixteen img {
  width: 100%;
}