CSS: 100% ширина или высота при сохранении соотношения сторон?

Question

В настоящее время с STYLE я могу использовать width: 100% и auto по высоте (или наоборот), но я все еще не могу ограничить изображение в определенной позиции, либо слишком широкой, либо слишком высокой, соответственно.

Есть идеи?

Answer 1

Не прыгать в старую проблему, но ...

#container img {
      max-width:100%;
      height:auto !important;
}

Несмотря на то, что это неправильно, если вы используете! Важное переопределение для высоты, если вы используете CMS, такой как WordPress, которая устанавливает высоту и ширину, это работает хорошо.

Answer 2

попробуйте

background-size: 100% 100%;
  background-image: url("PATH_TO_IMAGE");
  background-repeat: no-repeat;

Answer 3

Я думаю, это то, что вы искали, я искал это сам, но потом я вспомнил это снова, пока не нашел код.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

Цифровая эволюция уже в пути.

Answer 4

Используйте JQuery или около того, поскольку CSS является общим заблуждением (бесчисленные вопросы и обсуждения здесь о простых целях проектирования показывают это).

Невозможно с CSS сделать то, что вы хотите: изображение должно иметь ширину 100%, но если эта ширина приводит к слишком большой высоте, применяется максимальная высота - и, конечно, правильная пропорции должны быть сохранены.