Как уменьшить изображение, чтобы оно поместилось в фиксированном положении - PullRequest
Новая
       38

Как уменьшить изображение, чтобы оно поместилось в фиксированном положении

0 голосов
/ 18 марта 2019

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

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

.modal-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal-header {
  background: red;
  margin: 20px;
}

.modal-body {
  background: green;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
}

.modal-footer {
  background: blue;
  margin: 20px;
}
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        header
      </div>
      <div class="modal-body">
        <img src="https://via.placeholder.com/900x1200" />
      </div>
      <div class="modal-footer">
        footer
      </div>
    </div>
  </div>
</div>

Обратите внимание, что это простой пример, и я действительно использую сложный SVG, а не тег изображения, поэтому я не могу использовать фоновое изображение.

Ответы [ 3 ]

0 голосов
/ 19 марта 2019

Вы можете использовать старый добрый position: absolute с максимальной шириной и max-height: 

/* for demonstration I have replaced all irrelavant styles with this */
.modal-body {
  width: 80vw;
  height: 60vh;
  margin: 10% auto 0;
  background: green;
}
/* parent must be positioned */
.modal-body {
  position: relative;
}
/* size and center */
.modal-body img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
<div class="modal-body">
  <img src="https://via.placeholder.com/900x1200" />
</div>
0 голосов
/ 19 марта 2019

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

Ключ заключается в том, чтобы установить только ОДИН размер и позволить браузеру выяснить остальное.

Это особенно верно, если вы устанавливаете размеры Inline , используя соответствующую структуру HTML. 

<div class="modal-body">
    <img src="https://via.placeholder.com/900x1200" width="100%" />
  </div>

Теперь вы просто устанавливаете максимальную ширину контейнера с помощью CSS, и все устраивает. Это должно относиться к любому использованию тега img. Это означает, что если вы используете SVG в атрибуте img src, вы получите его как изображение. Тем не менее, я считаю, что вы потеряете SVG-взаимодействия, если вы сделаете это таким образом.

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

Обратите внимание, что большинство SVG имеют жестко заданную высоту и ширину в заголовке. Просто удаление жестко запрограммированной высоты / ширины «должно» сделать SVG-шкалу правильно, поскольку view-box сохраняет пропорции изображение. 

<svg width="299px" height="138px" viewBox="0 0 299 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="example">
            <rect id="Rectangle" fill="#D8D8D8" x="0" y="0" width="299" height="138"></rect>
            <circle id="Oval" fill="#46BEC6" cx="53" cy="50" r="26"></circle>
            <circle id="Oval-Copy" fill="#46BEC6" cx="105" cy="76" r="26"></circle>
            <circle id="Oval-Copy-2" fill="#46BEC6" cx="165" cy="95" r="26"></circle>
            <circle id="Oval-Copy-3" fill="#46BEC6" cx="217" cy="63" r="26"></circle>
            <circle id="Oval-Copy-4" fill="#46BEC6" cx="269" cy="32" r="26"></circle>
        </g>
    </g>
</svg>



<svg viewBox="0 0 299 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="example">
            <rect id="Rectangle" fill="#D8D8D8" x="0" y="0" width="299" height="138"></rect>
            <circle id="Oval" fill="#46BEC6" cx="53" cy="50" r="26"></circle>
            <circle id="Oval-Copy" fill="#46BEC6" cx="105" cy="76" r="26"></circle>
            <circle id="Oval-Copy-2" fill="#46BEC6" cx="165" cy="95" r="26"></circle>
            <circle id="Oval-Copy-3" fill="#46BEC6" cx="217" cy="63" r="26"></circle>
            <circle id="Oval-Copy-4" fill="#46BEC6" cx="269" cy="32" r="26"></circle>
        </g>
    </g>
</svg>

Если вы не знаете, какой из них нужно установить (как в случае с динамическим изображением), вам нужно измерить его с помощью javascript перед применением правильного измерения. Что-то вроде этого: 

fixImage(){
  var img = findTheImageInTheDom;
  if (img.width > img.height){
    img.width = "100%";
  } else {
    img.height = "100%";
}
0 голосов
/ 19 марта 2019

Использовать изображение в качестве фона: 

.modal-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal-header {
  background: red;
  margin: 20px;
}

.modal-body {
  background: green;
  flex: 1;
  /*display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;*/
  margin: 0 20px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}

.modal-footer {
  background: blue;
  margin: 20px;
}
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        header
      </div>
      <div class="modal-body" style="background-image:url(https://via.placeholder.com/900x1200)">
      </div>
      <div class="modal-footer">
        footer
      </div>
    </div>
  </div>
</div>

Или солдат max-width:100%;max-height:100%

.modal-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal-header {
  background: red;
  margin: 20px;
}

.modal-body {
  background: green;
  flex: 1;
  height:100%; /*to be able to use max-height*/
  min-height:0; /*to allow the shrink*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
}

.modal-footer {
  background: blue;
  margin: 20px;
}
img {
  max-width:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
}
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        header
      </div>
      <div class="modal-body" >
       <img src="https://via.placeholder.com/900x1200)">
      </div>
      <div class="modal-footer">
        footer
      </div>
    </div>
  </div>
</div>
...