Как заставить браузеры соблюдать соотношение сторон из атрибутов width и height html с применением css?

Question

Я ищу способ зарезервировать место для изображений в моем макете до их загрузки.
Я делаю это, добавляя свойства width и height к моим img.

Это работает как ожидалось:

img {
  display: block;
  border: 1px solid tomato;
}

<img src="" width="300" height="400" alt="">

Но в моем css я хочу ограничить свое изображение max-width.
Чтобы сохранить соотношение сторон изображения, Мне нужно установить height: auto. Но если я сделаю это, высота изображения рухнет:

img {
  display: block;
  border: 1px solid tomato;
  max-width: 200px;
  height: auto;
}

<img src="" width="300" height="400" alt="">

Есть ли способ заставить браузеры соблюдать соотношение сторон, которое можно рассчитать по моим html атрибутам?

---

Это все еще кажется проблемой. Firefox и Chrome теперь поддерживают внутреннее сопоставление ширины и высоты с соотношением сторон . Это делает именно то, что мне нужно.

Одна деталь реализации, которую я заметил, хотя: на изображении должна быть установлена ​​src, чтобы он работал. Пример, который я привел, кажется, помечает изображение как полностью загруженное и снова игнорирует соотношение сторон.

Так что для подхода с отложенной загрузкой нам нужно добавить изображение-заполнитель в src, который имеет правильное соотношение сторон, чтобы оно работало.

Несмотря на то, что в настоящее время это решение работает для chrome и firefox, я все еще ищу решение, которое также поддерживает старые браузеры и сафари. (хотя IE не нужно)

Answer 1

Итак, вы можете решить эту проблему с помощью небольшого количества хакерских программ, которыми я не слишком горжусь.

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

Несколько предостережений:

• Это устанавливает height, а не max-height из-за того, что изображение без src set не имеет встроенной высоты c, несмотря на атрибут.
• Если значения атрибутов height или width или значение свойства max-width в CSS изменить, настройка свойства style height также должна измениться. Многое нужно помнить, чтобы изменить, в зависимости от того, сколько у вас изображений.

Вы можете решить все это с помощью JavaScript, но так как у вас нет этого тега в вопросе, я хотел бы уважать это и даст вам CSS -только решение.

Я добавил немного JavaScript, который ждет 2 секунды, а затем устанавливает источник изображения на фиктивное изображение с предоставленными размерами, чтобы показать отсутствие искажения и имитации медленно загружаемого изображения.

setTimeout(() => document.querySelector('img').src = "https://dummyimage.com/300x400/000/fff.png", 2000);

img {
  display: block;
  border: 1px solid tomato;
  max-width: 200px;
  height: 100%;
}

<div class="img" style="height: calc((400/300)*200px)">
<img src="" width="300" height="400" alt="">
</div>