Масштабирование изображений с несколькими ограничениями по ширине и высоте - PullRequest
Новая
       4

Масштабирование изображений с несколькими ограничениями по ширине и высоте

0 голосов
/ 11 сентября 2018

У меня есть простой веб-сайт / HTML-страница, которая должна показать одно изображение и несколько кнопок.Но размер изображения должен соответствовать следующим правилам:

  • более короткая сторона изображений не должна отображаться, поскольку более 600 пикселей
  • высота изображения должнамаксимум 80% окна, чтобы оставить место для пользовательского интерфейса без необходимости прокрутки
  • ширина изображения должна составлять до 100% от окна
  • изображение не должно отображаться в увеличенном размере
  • соотношение сторон изображения не должно меняться

Относительно правила с более коротким размером: под более коротким размером я подразумеваю либо высоту, либо ширину изображения в пикселях, в зависимости от того, какойменьше по количеству.Таким образом, если изображение имеет размер 2000x1200, оно должно быть показано в размере 1000x600, поэтому более короткий размер равен 600. Но также изображение с разрешением 1200x88888 будет отображаться с разрешением 600x44444 пикселя.

Вот то, что я пробовал.Я изменил размеры всех изображений, чтобы их более короткий размер составлял 600 пикселей или меньше.Но изображения все еще разнообразны, изображение может быть 3000x600, но также может быть 100x3000 или 100x100.

И в коде, который я пробовал: 

<div style="max-height: 80%">
  <img style="margin: 0px auto; display: block; height: 100%;" src="http://www.dummyimage.com/800x200/000/fff&text=image">
</div>

, но это не работает для меня, так как размер изображения увеличивается, если высота окна на 80% больше, чем изображение.

Вот скрипка с 30% вместо 80%, чтобы сделать ее лучше видимой: http://jsfiddle.net/ErNeT/2723/

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Вероятно, невозможно определить, является ли изображение портретным или альбомным без JavaScript (чтобы определить более короткую сторону).Итак: 

$(window).on("load", function() {
  $("img").each(function() {
    if (this.naturalWidth >= this.naturalHeight) {
      $(this).addClass("landscape");
    } else {
      $(this).addClass("portrait");
    }
  });
});
body {
  margin: 0;
}
.demo {
  position: relative;
  height: 100vh;
  background-color: peachpuff;
}
.demo:nth-of-type(even) {
  background-color: papayawhip;
}
.demo::before {
  position: absolute;
  content: attr(title);
}
/* style used on page load */
img {
  max-width: 100vw;
  max-height: 80vh;
}
/* classes added by JavaScript */
img.landscape {
  max-width: 100vw;
  max-height: 600px;
}
img.portrait {
  max-width: 600px;
  max-height: 80vh;
}
/* 600px is greater than 80vh for screen shorter then 750px so... */
@media screen and (max-height: 750px) {
  img.landscape {
    max-height: 80vh;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="demo" title="Shorter side test (landscape)">
  <img src="http://www.dummyimage.com/1000x700/ccc/000"></div>

<div class="demo" title="Shorter side test (portrait)">
  <img src="http://www.dummyimage.com/700x1000/ccc/000"></div>

<div class="demo" title="Viewport width and height test">
  <img src="http://www.dummyimage.com/2400x2400/ccc/000"></div>

<div class="demo" title="No stretch test">
  <img src="http://www.dummyimage.com/200x200/ccc/000"></div>
0 голосов
/ 11 сентября 2018

посмотрите здесь https://www.w3schools.com/howto/howto_css_image_responsive.asp для адаптивного изображения просто css или используйте метатег рисунка, таким образом, вы тоже можете увидеть это https://css -tricks.com / respive-images-css/ 

<picture>
  <source srcset="extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="large.jpg" media="(min-width: 800px)">
  <img srcset="medium.jpg" alt="…">
</picture>
...