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

Question

Я хочу установить исходную ширину изображения, поэтому max-width: 100%, но ширина родительского контейнера изображения составляет 1000 пикселей, а исходный размер изображения не может превышать 1000 пикселей. Я ожидаю, что оригинальный размер изображения будет менее 1000 пикселей. Если ширина изображения превышает 1000 пикселей, установите размер изображения 1000 пикселей

img {max-width: 100%, width: 100%};
.container {width: 1000px};

. Я установил image max-width: 100%, чтобы изображение отображало оригинальный размер. Я установил width: 100%, чтобы исходный размер изображения не превышал ширину родительского контейнера в 1000 пикселей, но он не работает

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

.

Answer 1

Попробуйте установить

img {
   height: 100%,
   width: 100%;
   object-fit: contain;
}

Answer 2

Правильно, если для параметра max-width: 100% установлено значение img, если вы не хотите, чтобы изображение превышало контейнер.

Однако вам не нужно устанавливать img width: 100%, чтобы показать изображение в оригинальном размере. Просто width: auto или вы можете просто пропустить это, потому что ширина изображения по умолчанию составляет auto.

width: 100% относится к вашему изображению, масштабируется до 100% текущего родительского элемента. Это означает, что width: 100% только увеличит или уменьшит ваше изображение до ширины 1000 пикселей.

Просто уберите width: 100%, волшебство 1017 * завершено.