Максимальну ширину зображення CSS встановлено на початковий розмір зображення?

Ви можете це зробити? Користувачі завантажують зображення в контейнер із шириною: 100%, але не хочу, щоб зображення були більшими за їх початковий розмір. Дуже дякую!

css image

— нікк вонг
джерело

Зображення, природно, має бути такого розміру, як воно є. Ви також встановлюєте зображення на ширину: 100?

— Теодор Ендербі,

Ні, ви не можете. CSS не може дізнатися фактичний розмір випадкового зображення. Вам знадобиться javascript для виявлення розміру зображення та масштабування зображення.

— Koala Yeung

Відповіді:

125

Тільки не встановлюйте widthзображення, лише max-width.

img {max-width:100%; height:auto}

( height:autoнасправді не потрібно, оскільки autoце за замовчуванням, але я помістив його там як нагадування собі, що хочу, щоб зображення мало природні пропорції.)

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

div {border:2px outset green; margin:6px 0}
.box1 {width:100px; height:70px;}
.box2 {width:200px; height:100px;}
img {max-width:100%; height:auto}

<div class="box1">
    <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>
<div class="box2">
    <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>

Розгорніть фрагмент

— Містер Лістер
джерело

Якщо хтось задається питанням (як я), як замінити успадкований параметр ширини, просто додайте width: auto у новий клас, який ви призначите зображенню.

— grasskode

Це встановлює максимальну ширину до розміру контейнера, а не до вихідного (або природного) розміру зображення.

— Том

@Tom це правильно, згідно з умовами питання ОП. У вас інший сценарій? У такому випадку може бути краще задати нове запитання.

— Містер Лістер

Я не так читаю вимоги до ОП. Він просить, щоб він не перевищував початкових / природних розмірів, а не перевищував контейнер.

— Том

@MrLister developer.mozilla.org/en-US/docs/Web/CSS/max-width max-width у відсотках визначає max-width у відсотках від ширини вміщуваного блоку

— Том,

Ви можете встановити максимальну ширину зображення в тезі стилю на самому зображенні. Потім у таблиці стилів встановіть для типу відображення "блокування", ширину до будь-якого відсотка контейнера, який ви хочете, і висоту до автоматичного. Потім додайте margin: 0px auto до цього, і він повинен ідеально відцентруватися і ніколи не буде більшим за вихідний розмір.

Якщо це завантажені користувачем зображення, і ви, наприклад, використовуєте PHP, знайдіть ширину зображення за допомогою getImageSize () і програмно додайте до зображення тег стилю.

— Ненсі Гастінгс-Треу
джерело