Как сделать div отзывчивым и использовать фиксированный размер?

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

<center> 
 
    <div id="360container" style="width:1252px; height:805px; margin-right:50px; margin-left:50px">This is div 
 
    </div> 
 
</center>

Я хочу, чтобы уменьшить ширину при этом Div не подходит это браузер больше, когда ширина браузера меньше 1252 + 50 + 50px, и я хочу, чтобы высота уменьшится, но до сих пор сохраняйте одинаковое соотношение (1252x805).

Как это можно сделать?

источник

2015-06-10 Lord Vermillion

Кто-нибудь упомянул 'max-width: 1252px' и' width: 100% '? –

Вы можете добавить следующие CSS:

#360container { 
    width: 100%; 
    padding-bottom: 64.2%; /* 805 is 64.2% of 1252 */ 
}

источник

2015-06-10 07:46:09

Если вы хотите применить определенный стиль, когда ширина экрана между 320px и 480px, например, Вы можете использовать (@media запросов), чтобы обнаружить экран размер .:

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    { 
/* your style here */ 
}

источник

2015-06-10 07:56:23

Вот то, что может работать, чистый CSS

<div id="360container" style="position: relative; height: 0; margin:0 auto; 
    overflow: hidden;width:60%; max-width:500px; padding-bottom:25%; border:1px solid #000;"> 

     <div style="position:absolute; top:0;width:100%;height:100%;max-height:200px;background:#ccc;"></div> 

    </div>

взглянуть на фи ddle

https://jsfiddle.net/je3g4evs/1/

источник

2015-06-10 07:57:15 lugreen

Попробуйте этот код и дайте мне знать, удовлетворяет ли она вам или нет.

<!DOCTYPE html> 
    <html lang="en-US"> 
    <head> 
    <style> 
    .city { 
     float: left; 
     margin: 5px; 
     padding: 15px; 
     width: 300px; 
     height: 300px; 
     border: 1px solid black; 
    } 
    </style> 
    </head> 
    <body> 

    <h1>W3Schools Demo</h1> 
    <h2>Resize this responsive page!</h2> 

    <div class="city"> 
     <h2>London</h2> 
     <p>London is the capital city of England.</p> 
     <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
    </div> 

    <div class="city"> 
     <h2>Paris</h2> 
     <p>Paris is the capital and most populous city of France.</p> 
    </div> 

    <div class="city"> 
     <h2>Tokyo</h2> 
     <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> 
    </div> 

    </body> 
    </html>

источник

2015-06-10 08:04:01

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

<style> 
    .city { 
     float: left; 
     margin: 5px; 
     padding: 15px; 
     width: 100%; 
     height: 300px; 
     border: 1px solid black; 
    } 
</style> 
    <h1>W3Schools Demo</h1> 
    <h2>Resize this responsive page!</h2> 

    <div class="city"> 
     <h2>London</h2> 
     <p>London is the capital city of England.</p> 
     <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
    </div>

источник

2015-06-12 12:25:01

Как сделать div отзывчивым и использовать фиксированный размер?

ответ

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