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

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

Любые идеи?

ОТВЕТЫ

Ответ 1

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

Является ли проблема, что изображение больше/выше, чем вы предпочитаете?

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

Если изображение имеет ширину 100% и высоту: автоматически, и вы считаете, что оно слишком высокое, это особенно связано с тем, что соотношение сторон сохраняется. Вам нужно обрезать или изменить соотношение сторон.

Пожалуйста, предоставьте дополнительную информацию о том, что вы конкретно пытаетесь выполнить, и я попытаюсь помочь больше!

--- РЕДАКТИРОВАТЬ НА ОСНОВЕ ОБРАТНОЙ СВЯЗИ ---

Вы знакомы с max-width и max-height свойства? Вы всегда можете их установить. Если вы не устанавливаете минимальный уровень и вы устанавливаете максимальную высоту и ширину, ваше изображение не будет искажено (соотношение сторон будет сохранено), и оно не будет больше, чем любое измерение является самым длинным и достигает максимального значения.

Ответ 2

Несколько лет спустя, ища то же требование, я нашел вариант CSS, использующий размер фона.

Предполагается работать в современных браузерах (IE9 +).

<div id="container" style="background-image:url(myimage.png)">
</div>

И стиль:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Ссылка: http://www.w3schools.com/cssref/css3_pr_background-size.asp

И демо: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Ответ 3

Установив для свойства CSS max-width значение 100%, изображение заполнит ширину его родительского элемента, но не будет отображаться больше его фактического размера, сохраняя при этом разрешение.

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

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

Ответ 4

Простое элегантное рабочее решение:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Ответ 5

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

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Ответ 6

Простое решение:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

Кстати, если вы хотите центрировать его в родительском контейнере div, вы можете добавить эти свойства css:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Он должен работать так, как ожидалось:)

Ответ 7

Один из ответов включает в себя инструкцию background-size: contains css, которая мне очень нравится, потому что это простая формулировка того, что вы хотите сделать, и браузер просто делает это.

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

Допустим, у вас есть контейнер, который отзывчив, но имеет четко определенные границы минимальной и максимальной ширины и высоты.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

И у контейнера есть img, который должен знать пиксели высоты контейнера, чтобы избежать получения очень высокого изображения, которое переполняется или обрезается.

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

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Обратите внимание, что у него хорошая тень;)

Наслаждайтесь живым примером на этой скрипке: http://jsfiddle.net/pligor/gx8qthqL/2/

Ответ 8

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

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

Ответ 9

Лучше всего использовать auto для измерения, которое должно учитывать соотношение сторон. Если вы не установите другое свойство в auto, большинство браузеров в настоящее время предположит, что вы хотите уважать аспектный рацион, но не все из них (например, IE10 на телефоне Windows 8 не работает)

width: 100%;
height: auto;

Ответ 10

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

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Ответ 11

Не переходить в старую проблему, но...

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

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

Ответ 12

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

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

Ответ 13

Это невозможно без JS, поэтому я написал небольшой script:

var resize_images;

resize_images = function(resize) {
  var images, resize_process, resize_single;
  if (resize == null) {
    resize = false;
  }
  resize_single = function(that) {
    if (that.height() <= 200) {
      return that.css({
        'width': 'auto',
        'height': '100%'
      });
    } else {
      return that.css({
        'width': '100%',
        'height': 'auto'
      });
    }
  };
  resize_process = function(that) {
    that.css({
      'width': 'auto',
      'height': 'auto'
    });
    resize_single(that);
    return resize_single(that);
  };
  images = $('.image img');
  return images.each(function() {
    if (resize) {
      return resize_process($(this));
    } else {
      return $(this).on('load', function() {
        return resize_process($(this));
      }).each(function() {
        if(this.complete) $(this).trigger('load');
      });
    }
  });
};

resize_images();

$(window).resize(function() {
  return resize_images(true);
});

CoffeeScript

И scss:

.image {
  position: relative;
  overflow: hidden;
  width: 50%;
  height: 200px;
  float: left;

  img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

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

jsfiddle.net

Ответ 14

В настоящее время можно использовать единицы vw и vh, которые составляют 1% от v iewport w idth и h восемь соответственно.

https://css-tricks.com/fun-viewport-units/

Так, например:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... сделает изображение максимально широким, сохраняя соотношение сторон, но не шире и не превышая 100% области просмотра.

Ответ 15

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

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

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

Ответ 16

попробуйте это

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