Отзывчивое фоновое изображение для каждого раздела

Привет, я много искал, но я не могу найти решение.Отзывчивое фоновое изображение для каждого раздела

На самом деле, я хочу иметь изображение для каждого раздела HTML. и он должен быть отзывчивым.

вот мой код

<section id="portfolio"> 

    </section> 

    <section class="success"> 

    </section>

и CSS

#portfolio { 
    background: url(../img/STS_247650163-Web.jpg); 
    background-size: cover; 
height:400px; 
} 
.success { 
    background: url(../img/success.jpg); 
    background-size: cover; 
height:1100px; 
}

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

я пытался .. другой способ, но ничего не работает

спасибо

источник

2016-10-26 danel yad

Я нашел [это] (http://stackoverflow.com/a/12609315/4045532) очень полезно именно для вашей ситуации – Corporalis

У вас есть два пути, чтобы сделать адаптивные изображения.

Использование bootstrap- .img-responsive

использование пользовательских медиа запросов -

@media screen and (max-width: 368px) { 
img.yourclass{ 
    min-height: 150px or auto; 
}

}

Лучше использовать загрузчик для ваших дивы или секции, попробуйте это -

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Image</h2> 
 
    <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p> 
 
    <img class="img-responsive" src="http://placehold.it/350x150" alt="Chania" width="460" height="345"> 
 
</div> 
 

 
</body> 
 
</html>

источник

2016-10-26 12:05:35

Привет Спасибо, но фоновое изображение не полного размера. Я хочу быть в полном размере –

Отзывчивое фоновое изображение для каждого раздела

ответ

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