Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
taras_student
-3 / 0 / 6
Регистрация: 21.06.2015
Сообщений: 152
1

Пропорциональное уменьшение фона по высоте

05.09.2016, 16:28. Просмотров 937. Ответов 3
Метки нет (Все метки)

Здравствуйте, как сжать фон-картинку по высоте блока если высота и ширина картинки превышает высоту блока?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>InfoPage</title>
    <link rel="stylesheet" href="style.css"/>
</head>
 
<body>
    <header>
        <div class="container">
            <div class="business-card">
 
            </div>
        </div>
    </header>
 
    <content>
        <div class="about">
            <div class="container">
                <div class="about_me">
 
                </div>
                <div class="my_skills">
 
                </div>
 
            </div>
        </div>
     
        <div class="projects">
 
        </div>
    </content>
    <footer>
 
    </footer>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
    margin:0px;
}
 
.container{
    width:1600px;
 
}
 
header{
    
    height:600px;
    width:100%;
    background-image:url(header.jpg);
    background-size:cover;
 
  
}
Вот сама картинка
Пропорциональное уменьшение фона по высоте
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.09.2016, 16:28
Ответы с готовыми решениями:

Пропорциональное уменьшение/увеличение фона в зависимости от размера блока
Добрый день! Посоветуйте пожалуйста, как пропорционально уменьшать backround:...

пропорциональное уменьшение картинки по двум сторонам
Нужно пропорционально уменьшить картинку но так чтобы она была не более 100px...

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

Плавное уменьшение img с уменьшение блока (адаптивно)
При уменьшении окна браузера, уменьшать пропорционально картинку в div'e или...

Пропорциональное изменение 2х блоков
Всем доброго времени суток! Стоит задача такая:есть два блока на странице, меню...

3
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2804 / 2375 / 1029
Регистрация: 15.12.2012
Сообщений: 8,770
Записей в блоге: 3
05.09.2016, 16:38 2
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

taras_student, может так попробовать:
CSS
1
background-size:100% 100%
вместо:
CSS
1
background-size:cover
1
taras_student
-3 / 0 / 6
Регистрация: 21.06.2015
Сообщений: 152
05.09.2016, 16:43  [ТС] 3
Спасибо. Все выравнялось. А что касается адаптивности? Я где-то читал что для адаптивности изображения нужно обязательно указывать свойство background-size:cover;
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2804 / 2375 / 1029
Регистрация: 15.12.2012
Сообщений: 8,770
Записей в блоге: 3
05.09.2016, 16:58 4
Цитата Сообщение от taras_student Посмотреть сообщение
А что касается адаптивности? Я где-то читал что для адаптивности изображения нужно обязательно указывать свойство background-size:cover;
Со свойством которое я указал, изображение тоже будет адаптивным, но при сужении экрана будут немного нарушаться пропорции... Чтобы избавиться от такого эффекта можно заюзать медизапросы... Или при использовании резиновой вёрстки, не указывая header высоту,задать её размеры за счёт контента...
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.09.2016, 16:58

Пропорциональное изменение размеров сайта
Здравствуйте. Имеется следующая задача: Подогнать сайт под всевозможные...

Пропорциональное изменение размеров изображений
подскажите как сделать чтобы картинки самых разных размеров отображались...

Пропорциональное изменение размеров div (от родителя до всех вложенных)
Есть такой код: &lt;div id=&quot;dsk-l&quot;&gt; &lt;div id=&quot;dsk-l-brd&quot;&gt;&lt;/div&gt; &lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru