Сбросить ширину и высоту изображения через CSS - PullRequest
Новая
       10

Сбросить ширину и высоту изображения через CSS

4 голосов
/ 30 марта 2012

Я пытаюсь создать флюид-макет в формате HTML, содержащий изображения.На данный момент я поддерживаю 2 размера для макета.Макет по умолчанию используется для отображения сайта шириной 1000 пикселей.Если экран достаточно широкий (шире, чем 1200 пикселей), я расширяю многие аспекты с помощью медиа-запросов CSS.

У меня есть контейнер DIV шириной 600 пикселей для макета по умолчанию и 700 пикселей для расширенного макета.Внутри есть случайное изображение, для которого я знаю некоторые метаданные (ширина и высота).Мне может понадобиться уменьшить размер изображения, если оно слишком велико для контейнера.

Поэтому я использую этот код для создания флюидного макета 

<div class="container">
  <!-- for a 650px/400px image, the downsized version is 600px/369px -->
  <img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>

и стиля 

@media screen and (min-width:1200px){
  .container IMG {
    width:auto !important;
    height:auto !important;
  }
}
  • Вот как это работает:

В случае макета по умолчанию применяется встроенный стиль.Таким образом, изображение уменьшено до 600px / 369px, чтобы соответствовать контейнеру.В противном случае применяется стиль медиазапроса, и изображение имеет ширину / высоту по умолчанию (я знаю, что изображение никогда не бывает шире 700 пикселей, поэтому все в порядке).

  • Моя проблема связана с состоянием загрузкиизображения и пространство, зарезервированное браузером.Поведение chrome / firefox такое же, но довольно странное для меня.Не тестировался с IE (на самом деле это не мой приоритет)

Для макета по умолчанию, нет проблем, все еще применяется встроенный стиль.В браузере отображается пустое пространство, соответствующее изображению.

Для расширенного макета применяются «автоматические» размеры.Но браузер не знает естественного размера изображения, пока оно не загружено полностью, и кажется, что «auto» эквивалентно 0px.Было бы идеально, если бы атрибуты ширины и высоты, установленные для изображения, применялись.Но это не так.В результате для изображения не зарезервировано пространство, а это не то поведение, которое мне нужно.

  • Первое решение, которое я нашел, - добавить еще одно встроенное правило css для изображения.Если я добавлю «min-width: 600px; min-height: 369px», зарезервированное пространство для изображения всегда будет 600x369 пикселей вместо 0 пикселей для расширенного макета.Это лучше, но еще не идеально.

- Как вы думаете?

  • Можно ли "сбросить" CSS вместо того, чтобы переопределять его с помощью "auto"! важное "правило?
  • Должен ли я использовать другой подход?
  • Я могу использовать некоторый javascript, но я думаю, что полагаться на него - плохая идея.На самом деле, у меня может быть много контейнеров, похожих на описанный выше.Я предпочитаю автоматическое решение (для этого отлично подходит css).

Ответы [ 3 ]

2 голосов
/ 29 июля 2015

Вы можете просто установить width или height на initial .., который сбрасывает значение при переопределении ..

1 голос
/ 30 марта 2012

Общий подход, который я видел для адаптивных изображений, заключается в том, чтобы родительский элемент (например, .container) изменял размеры с помощью медиа-запросов. В вашей разметке удалите атрибуты width и height , а затем в свой CSS добавьте: 

img {
   width: 100%;
 }

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

Я поднимаю это, потому что похоже, что вы хотите использовать один и тот же файл изображения, но просто увеличивайте / уменьшайте его. Основным недостатком является то, что увеличенное изображение может загружаться на экран мобильного устройства и увеличивать загрузку страницы. В настоящее время это является основным техническим препятствием, с которым сталкивается адаптивный дизайн, и ведутся широкие дебаты о том, как лучше всего его устранить.

0 голосов
/ 30 марта 2012

Используйте .container IMG.someClass { ... }, затем вы можете удалить имя класса из изображения, чтобы удалить стилизацию CSS.

...