Позиция и масштаб объекта CSS по разрешению

I'm trying to achieve this in css Позиция и масштаб объекта CSS по разрешению

Как бы я это сделал? Я не мог заполнить пустое пространство по бокам, могу ли я сделать это только в css (и поэтому он работает с масштабированием браузера)

Это мой код (упрощенный), поскольку ничего не работает для мне я обеспечиваю необработанный код

<html> 
 
<head> 
 
    <style>   
 
     #parent { 
 
      width: 1000px; 
 
      height: 1000px; 
 
      background-color: #0ff; 
 
     } 
 
     
 
     .child { 
 
      width: 400px; 
 
      height: 200px; 
 
      margin: 20px; 
 
      background-color: #f00; 
 
      float: left; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="parent"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-05-20 Not Szwagi

Просьба указать код, который вы пытаетесь. Напомним, что перед отправкой вопроса, пожалуйста, проверьте существующие вопросы. Я считаю, что есть вопросы, связанные с [Отзывчивый дизайн] (http://stackoverflow.com/questions/tagged/responsive-design) –

Использование flexbox

Fiddle demo

#parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background-color: #0ff; 
 
} 
 
.child { 
 
    flex: 1 0 auto; 
 
    width: 400px; 
 
    height: 200px; 
 
    margin: 20px; 
 
    background-color: #f00; 
 
}

<div id="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

источник

2016-05-20 16:20:56 LGSon

стиль родительского контейнера (если вы не один, то создайте его) следующим образом

.parent { 
display:flex; 
flex-wrap:wrap; 
} 

.child { 
flex: 1; 
width: 45%; /* whatever you want on the bigger screen */ 

@media (min-width : 500px) { 

    .child { 
     width:100% ; 
    } 
}

источник

2016-05-20 16:13:20

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

Вы должны создать рабочий пример, потому что этот https://jsfiddle.net/nswcrhaf/ не работает. –

Flexbox действительно хорош в такого рода вещи:

Demo on Codepen (или запустить его ниже)

div.out { 
 
    border: #f00 solid 1px; 
 
    width: 500px; 
 
    height: 300px; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
} 
 
div.out div.flex { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
     -ms-flex-wrap: wrap; 
 
      flex-wrap: wrap; 
 
    border: #00f dashed 1px; 
 
    width: 100%; 
 
} 
 
div.out div.flex div.in { 
 
    min-width: 300px; 
 
    border: #008000 solid 5px; 
 
    height: 100px; 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex-grow: 1; 
 
     -ms-flex-positive: 1; 
 
      flex-grow: 1; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
} 
 
div.out div.flex div.in h2 { 
 
    font-size: 2rem; 
 
} 
 

 

 
/* Below : just for the animation */ 
 

 
div.out { 
 
    -webkit-animation-duration: 1s; 
 
      animation-duration: 1s; 
 
    -webkit-animation-name: changewidth; 
 
      animation-name: changewidth; 
 
    -webkit-animation-iteration-count: infinite; 
 
      animation-iteration-count: infinite; 
 
    -webkit-animation-direction: alternate; 
 
      animation-direction: alternate; 
 
} 
 
@-webkit-keyframes changewidth { 
 
    from { 
 
    width: 300px; 
 
    } 
 
    to { 
 
    width: 800px; 
 
    } 
 
} 
 
@keyframes changewidth { 
 
    from { 
 
    width: 300px; 
 
    } 
 
    to { 
 
    width: 800px; 
 
    } 
 
}

<div class="out"> 
 
    <div class="flex"> 
 
    <div class="in"> 
 
     <h2>Content1</h2> 
 
    </div> 
 
    <div class="in"> 
 
     <h2>Content2</h2> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-05-20 16:25:17

Позиция и масштаб объекта CSS по разрешению

ответ

Смежные вопросы