Как вы увеличиваете / изменяете размер изображения после его загрузки? - PullRequest
Новая
       14

Как вы увеличиваете / изменяете размер изображения после его загрузки?

0 голосов
/ 13 февраля 2020

Фон:

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

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

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

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

<style>
  /* These aren't the actual values, they are dynamically calculated to fit
     the browser's viewport to prevent the image area from growing so large
     that it doesn't fit completely on the screen when the original image is
     either initially too large or the <img> width value is set by the user
     that causes the image to grow too large that one or both of the parent
     div's scrollbars 'switch-on'. */
  div > img {
    width: 1000px;
    height: 800px;
  }
</style>
<div style="overflow: auto;">
  <img style="object-fit: contain; width: 100%;" src="">
</div>

Цели:

При увеличении, или уменьшении, поп Размер области изображения зрителя не изменяется, вместо этого изображение внутри этой области увеличивается или уменьшается при увеличении или уменьшении изображения.

Частичное решение:

Вот код в CodePen для карусели и зрителя. Карусель работает, и если щелкнуть одно из изображений, оно отображается во всплывающем окне просмотра.

Эта версия включает решение Stefan F. и LakshmiS о том, как вписать изображения в область изображения.

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

1 Ответ

0 голосов
/ 13 февраля 2020

Вы можете добавить «подгонка объекта: содержать» к css вашего изображения. 

div#myModal > div.modal-content > div.mySlide > img {
   width: 100%;
   object-fit: contain;
}
...