Держите div центрированным с сохранением пропорций и изменением размера по вертикали или по горизонтали

Question

Держите div центрированным с сохранением пропорций и изменением размера по вертикали или по горизонтали

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

Здесь есть код: https://codepen.io/william-bang/pen/ZjyWRd

То, что я создал, это только решает проблему горизонтально, но не вертикально. Мне удалось заставить его работать, и для этого размерность ведет себя по-другому. Я ищу решение для CSS, хотя я открыт для решения JS, если кто-то абсолютно уверен, что решения не существует.

body {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 40%;
  height: 100%;
  margin: auto
}

.img {
  padding-top: 50%;
  width: 100%;
  background: #ccc;
  text-align: center;
}

<div class="wrapper">

  <div class="img">
    **IMG HERE**
  </div>
  
</div>

Я был бы благодарен за любые предложения, это заставило меня занять много времени. заранее спасибо :)

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

@Grenther Спасибо за ваш ответ, я попытался изменить ответ, который вы дали, чтобы сделать это исключительно в CSS и не использовать препроцессор CSS. Это было очень хорошо, пока я не понял, что CSS-запросы СМИ не поддерживают стандартные переменные CSS, иначе предложенный метод был бы возможен без SCSS, но, возможно, вы уже это знали.

:root {
  --ogW: 1600;
  --ogH: 900;
  --ratio: calc( var(--ogW) / var(--ogH));
}

 body {
  width: 100%;
  height: 100%;
}

.ratio {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  @media screen and (max-width: 177vh) {
    width: 90vw; 
    height: calc( 90vw / var(--ratio)); 
  } 

  @media screen and (min-width: 177vh) {
    width: calc( 90vh * var(--ratio));  
    height: 90vh;
  }

}

.div {
  width: 100%;
  height: 100%;
  background: red;
  text-align: center;
}

<div class="ratio">

  <div class="div">
    
    Hello!
    
  </div>
  
</div>

javascript,jquery,html,css,

3

Ответов: 3

JavaScript, JQuery, HTML, CSS,

Похожие вопросы

score 2 · Accepted Answer

2 принят

Окончательное обновление:

Он превратился в вопрос SCSS, причем любой вход для переменной ширины или высоты можно сделать следующим образом:

http://jsfiddle.net/832v5f0L/41

 $div-width : 1600;
 $div-height : 900;

 $ratio: $div-width / $div-height;

  @media screen and (max-width: (100 * $ratio) + vh) {
    width: 100vw; // always 100vw to fill
    height: (100 / $ratio) + vw; // 100 / ratio
  }

  @media screen and (min-width: (100 * $ratio) + vh) {
    width: (100 * $ratio) + vh;  //100 * ratio
    height: 100vh; // always 100vh to fill
  }

Обновленный ответ:

Портрет мультимедийного запроса автоматически активируется, когда ширина меньше высоты. Который гарантирует, что мы сможем использовать тело { width : 100% ; высота : 100% ; } . wrapper { position : absolute ; слева : 50% ; верх : 50% ; -webkit-transform : translate (- 50% , - 50% ); transform : translate (- 50% , - 50% ); } / * 100vh * (100 / height) с hright 50: 100vh * 100/50 = 200vh * / @media screen и ( max-width : 200vh ) { . обертка { ширина : 100vw ; высота : 50vw ; } } экран @media и ( min-width : 200vh ) { . обертка { ширина : 200vh ; высота : 100vh ; } } . img { / * padding-top: 50%; * / ширина : 100% ; высота : 100% ; background : #ccc ; text-align : center ; background-img : url () } и vw для получения максимально возможного размера без достижения переполнения.

Соотношение между шириной и высотой гарантирует, что вы можете получить фиксированное соотношение сторон.

<div class="wrapper">

  <div class="img">
    **IMG HERE**
  </div>
  
</div>

img

Обновление: запросы минимальной ширины

score 1 · Accepted Answer

1

См. Ниже фрагмент кода. Когда вы настраиваете ширину обертки, imgмасштаб масштаба будет соответствовать, сохраняя при этом его соотношение сторон

.wrapperТакже будут выровнены по вертикали и по горизонтали в пределах элемента* { box-sizing:border-box; } html, body { width: 100%; height: 100%; } .wrapper { width: 50%; height: 100%; margin: auto; position: relative; } .img { max-width: 100%; max-height: 100%; padding:20px 40px; background:grey; position: absolute; top: 50%; left: 0; right: 0; height: fit-content; width: fit-content; margin: auto; transform: translateY(-50%); } .img img { max-width: 100%; height: auto; max-height: 100%; }

<div class="wrapper">
  <div class="img">
    <img src="https://cdn.pixabay.com/photo/2013/01/29/00/47/search-engine-76519_960_720.png">
  </div>
</div>

max-height

score 0 · Accepted Answer

0

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

Но ответ @Grenther, похоже, работает без использования изображения. Его соотношение div 1x2 остается верным при настройке ширины и высоты окна.

Затем я изменил его код так, что есть max-widthи 200px x 400pxна div. Я мог только заставить это работать с его vhотношением.

Было бы замечательно, если @Grenther мог бы обновить мой код jsfiddle, поэтому, когда sass mathбы vhни была установлена переменная размера div / ratio, его умные размеры метода будут корректироваться, так что любой размер набора div будет работать. Даже я изо всех сил пытаюсь понять, как работает его версия. Но если математика в коде сасса для каждого vhизмерения, мы могли бы понять его волшебство.

@Grenther версия здесь: https://jsfiddle.net/joshmoto/jndmoz6v/

 /* div size vars and div ratio3 */
 $div-width : 400;
 $div-height : 200;

 body {
  width: 100%;
  height: 100%;
}

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

  /* set your div max-size here  */
  max-width: $div-width + px;
  max-height: $div-height + px;

  @media screen and (max-width: 200vh) {
    width: 100vw;
    height: 50vw;

  }

  @media screen and (min-width: 200vh) {
    width: 200vh;
    height: 100vh;

  }

}

.div {
  width: 100%;
  height: 100%;
  background: red;
  text-align: center;

}

Я знаю, что это не вопрос sass, но я просто использую это, чтобы мы могли видеть логику ответа @Grenther .

Я сам пробовал математику, но когда я меняю размер div / ratio, он не работает, как его версия.

См. Мой сбой: https://jsfiddle.net/joshmoto/Lkebpyws/

$div-width : 400;
$div-height : 200;

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

  /* set your div max-size here  */
  max-width: $div-width + px;
  max-height: $div-height + px;

  @media screen and (max-width: $div-height + 'vh') {
    width: ($div-width / 4) + vw;
    height: ($div-height / 4) + vw;

  }

  @media screen and (min-width: $div-height + 'vh') {
    width: ($div-width / 2) + vh;
    height: ($div-height / 2) + vh;

  }

}

...