Отзывчивых изображений для различных мобильных телефонов и планшетов

я пытаюсь разработать адаптивную страницу с начальной загрузкой, разделенная с помощью высоты в % так что бар прокрутки не должен появляться для небольших экранов устройств и он должен содержать раздел с изображение, которое я хочу быть отзывчивым для разных размеров мобильных телефонов и планшетов, но я смущен правильным способом сделать это. Я пробовал использовать класс img-отзывчивого класса bootstrap, но он переполняется в соответствии с приведенным ниже кодом, когда я запускаю его на разных устройствах в Intel XDK. поэтому я просто нуждаюсь в правильном направлении, чтобы сделать это идеально.Отзывчивых изображений для различных мобильных телефонов и планшетов

JSFIDDLE: Jsfiddle link

Примечание: не переполнены в jsfiddle, но не то же самое в Intel XDK.i я использую Intel XDK, как я хочу, чтобы использовать эту страницу в гибридном приложении.

HTML:

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>:: ૮૪ બેઠકજી ::</title> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" href="b/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/start.css" /> 
</head> 
<body> 
    <!--<script src="cordova.js"></script>--> 
<header> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> 
       <div class="main_title">Title</div> 
      </div> 
     </div> 
    </div> 
</header> 
<section id="photo"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-12 col-xs-12" id="cont"> 
       <img src="img/aaa.jpg" id="start_img" class="img-responsive center-block"> 
      </div> 
     </div> 
    </div> 
</section> 
<section id="button"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> 
       <center><a href="" class="btn btn-danger" id="start_a"> પ્રવેશ </a></center> 
      </div>  
     </div> 
    </div> 
</section> 
<footer> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> 
       <center><div class="f1">heading </div></center> 
      </div> 
     </div> 
     <div class="row" id="a1"> 
      <div class="col-md-3 col-sm-3 col-xs-3"> 
       <div class="f2">some text</div> 
      </div>  
      <div class="col-md-9 col-sm-9 col-xs-9"> 
       <div class="f2">some text</div> 
      </div>  
     </div> 
    </div> 
</footer> 

    <script src="js/jquery.js"></script> 
    <script src="b/js/bootstrap.min.js"></script> 
</body> 
</html>

CSS:

html,body{ 
    height:100%; 
    margin:0; 
    top:0; 
    bottom:0; 
    height:100%; 
    min-width:100%; 
    max-height:100%; 
    background:#ff9800; 
    overflow:hidden; 
} 
header{height:14%;} 
section#photo{height:50%;background:red;} 
section#button{height:13%;} 
footer{height:23%;background:green;} 

div.main_title{ 
    color:#fff; 
    text-align:center; 
    line-height:1.3em; 
    font-size:2em; 
    font-weight:bold; 
    margin-top:0.5em; 
    margin-bottom:0.5em; 
} 
a#start_a{margin-top:0.5em;font-size:1.6em;padding-left:1.5em;padding-right:1.5em;} 

div.f1{ 
    color:#fff; 
    font-weight:bold; 
    font-size:1.3em; 
} 
div#a1{padding-top:0.5em;} 
div.f2{ 
    color:brown; 
    text-align:center; 
    font-weight:bold; 
    font-size:1.3em; 
} 
@media screen and (orientation:landscape) { 
    html,body{height:auto;overflow:auto;} 
}

я использовал указанный размер изображения в качестве 700px х 700px, как я думал, что это не будет размываться на больших устройствах.

источник

2016-02-17 Ankur

Изменить 'раздел # фото {высота: 50%; фон: красный;}' 'в разделе # фото { background: red;} ' – Dino

@Dino Я использую высоту здесь, чтобы страница вписывалась в контейнер без полосы прокрутки. – Ankur

Вместо IMG тега использование фонового изображения на #cont и установите размер покрытия:

<div class="col-md-12 col-sm-12 col-xs-12" id="cont"></div> 


#cont { 
    width:100%; 
    height:300px; 
    background-image:url(../img/aaa.jpg); 
    background-size:cover; 
}

источник

2016-02-17 08:21:00 alps

@ alps.On Используя вышеупомянутое решение, изображение больше не будет реагировать, поскольку мы указываем фиксированную высоту 300 пикселей, поэтому на больших экранах это будет очень маленькое изображение. – Ankur

Используйте vh, тогда лучше работать для разных размеров. – alps

Я пробовал vh, но он вел себя одинаково. Можете ли вы направить меня на какой-нибудь другой успешный метод или онлайн-учебник для того же? – Ankur

Отзывчивых изображений для различных мобильных телефонов и планшетов

ответ

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