изображение, которое прорывается через его контейнер div, по меню - PullRequest
Новая
       16

изображение, которое прорывается через его контейнер div, по меню

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

Я пытаюсь сгенерировать страницу, которая отображает изображение на основе пропорций экрана.

Я использую начальную загрузку и определенную CSS для определения изображений: адаптивных и вращающихся на основе соотношения сторон

Когда изображение поворачивается по вертикали, оно не «содержится» в своем контейнере div и отображается в меню

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

Ниже приведен соответствующий пример кода (я не удосужился добавить полное меню), у меня также работает JSFiddle пример 

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='css/vbfqy.css'>

<style>
@media (max-aspect-ratio: 1/1) {
  .propor {
    transform: rotate(90deg);
  }
}
</style>


        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
              <a class="navbar-brand" href="#" target="_blank">Brand</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse-1">
              <ul class="nav navbar-nav">
                <!-- li><a href="#">Link</a></li -->
                <li class="dropdown">123</li></ul></div></nav>


<div class="container-fluid" >

    <img class="img-responsive propor" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97350&w=600&h=350">

</div>


  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>

Ответы [ 4 ]

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

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

Разделите ширину изображения по высоте изображения, чтобы получить соотношение сторон, необходимое для правильной работы этого преобразования.600/350 = 171,42 

@media (max-aspect-ratio: 1/1) {
  .propor {
    transform: rotate(90deg) translate3d(0,-171.42%,0) scale(1.7142);
    transform-origin: top left;
  }
}
0 голосов
/ 25 сентября 2018

Хитрость заключается в том, чтобы вращать изображение вокруг левого нижнего угла.Это устанавливает изображение на 100% высоты;Затем он переводит его для вашего требуемого эффекта. 

.propor {
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */
    transform: translateY(-100%) rotate(90deg); /* W3C */  
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}
0 голосов
/ 25 сентября 2018

Несмотря на то, что изображение наклонено вертикально, к нему применяется отзывчивый класс, как если бы он был расположен горизонтально.Поэтому, даже если вы применяете поля при повороте по вертикали, результат не будет аккуратным / идеальным.

Могу ли я предложить вам сохранить отдельное (портретное) изображение (а не трансформировать его в пропорции 1): 1) ... таким образом img-отзывчивый класс может вести себя предсказуемо, и вы всегда получаете то, что хотели.

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

Нужно установить верхнюю границу для дизайна с соотношением сторон: 

@media (max-aspect-ratio: 1/1)
.propor {
    transform: rotate(90deg);
    margin-top: 55px;/*Newly added*/
}
...