Почему не работает в адаптации под другие разрешения, свойство background: url

@masli · Регистрация: 27.03.2013

Author24 — интернет-сервис помощи студентам

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

Я даже картинку уменьшил до ширины 768 пикселей и указал к ней путь в блоке адаптации ?

HTML5

<!--Первый блог-->
        <div class="blog-container">
            <div class="blog-header">
                <div class="blog-cover" id="blog-cover-one">
                </div>
            </div>
            <div class="blog-body">
 
....................................

вот этот код - в основном блоке

CSS

#blog-cover-one{
    background: url(../img/blog/Porsche911.png);
       background-size: cover; /*Масштабирует фоновое изображение, 
        согласно заданным размерам. cover - Масштабирует изображение с сохранением 
        пропорций так, чтобы его ширина или высота равнялась 
        ширине или высоте блока.*/
}

вот этот код, в блоке адаптации

CSS

@media screen and (max-width: 768px) {
 
.............................
 
   #blog-cover-one {
    background: url(../img/blog/Porsche911-768.png);
    background-size: cover; /*Масштабирует фоновое изображение, 
        согласно заданным размерам. cover - Масштабирует изображение с сохранением 
        пропорций так, чтобы его ширина или высота равнялась 
        ширине или высоте блока.*/
}
 
}

На случай, если скажете, что здесь идентификаторы применять плохо, я вынужден их был применить, так как у меня несколько статей на странице и чтобы не повторять кусок настроек для класса "blog-cover", пришлось добавить id, по другому не знаю как.

Добавлено через 1 минуту

HTML5

.....................
<div class="blog-header">
                <div class="blog-cover" id="blog-cover-one">
                </div>
....................................

@gogolik · 05.10.2018, 16:25

Сообщение от masli

по другому не знаю как.

HTML5

1
2
3

<div class="blog-cover first"></div>
<div class="blog-cover second"></div>
<div class="blog-cover third"></div>

CSS

.blog-cover {
/* все свойства */
}
.blog-cover.first {
background: url();
}
.blog-cover.second {
background: url();
}
.blog-cover.third {
background: url();
}

По поводу вопроса не знаю даже, можно ссылку на пациента? Может конфликт с другими стилями.

@masli · 05.10.2018, 16:35 **[ТС]**

Сообщение от gogolik

По поводу вопроса не знаю даже, можно ссылку на пациента? Может конфликт с другими стилями.

могу только проект сбросить он локально.

Добавлено через 54 секунды
не разбирался как пользоваться различными "песочницами"

@gogolik · 05.10.2018, 16:50

Не по теме:

masli, попробуйте jsfiddle.net, там ничего сложного.

@masli · 05.10.2018, 16:51 **[ТС]**

Вот проект

@masli · 05.10.2018, 16:56 **[ТС]**

https://jsfiddle.net/u6ym7fjs/... lGq6QDAuz0

@gogolik · 05.10.2018, 16:58

А в чем проблема? Ничего не обрезает. Если только, возможно, из-за высоты blog-cover в 15rem, но не думаю.

@masli · 05.10.2018, 17:02 **[ТС]**

Вот разрешение на браузере - 768 пикселей(плагин для firefox использую)

плагин web developer

@masli · 05.10.2018, 17:07 **[ТС]**

а вот 420 пикселей

@gogolik · 05.10.2018, 17:12

masli, ну да, просто при уменьшении окна браузера режет. Это потому что пропорции не сохраняются. Высоту блока нужно указывать меньше тогда или использовать процены/vh.

@masli · 05.10.2018, 17:21 **[ТС]**

Сообщение от gogolik

Высоту блока нужно указывать меньше тогда или использовать процены/vh.

Не совсем понимаю какого блока ?

И что значит - процены/vh. ?

Добавлено через 3 минуты
Оказалось в блоке адаптации достаточно нужно было указать

CSS

blog-cover {
    border-radius: 5px 5px 0 0; /*радиус для верхнего левого, верхнего правого, 
        нижнего правого и нижнего левого уголков.*/
    height: 10rem;
    box-shadow: inset rgba(0,0,0,0.2) 0 64px 64px 16px; /* inset - внутренняя тень 
        (Черный цвет, с прозрачностью 0.2*/
}

спасибо

решено

Добавлено через 54 секунды
Изменил высоту обертки

@gogolik · 05.10.2018, 20:14

masli, ну я это и писал.

)))

Новые блоги и статьи
Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .	Полезные поделки на Arduino, которые можно сделать самому raxper 06.01.2025 Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .	Подборка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .
С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .	Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом зад Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	05.10.2018, 16:35 [ТС]	3
	Сообщение от gogolik По поводу вопроса не знаю даже, можно ссылку на пациента? Может конфликт с другими стилями. могу только проект сбросить он локально. Добавлено через 54 секунды не разбирался как пользоваться различными "песочницами" 0

@gogolik
	05.10.2018, 16:50 #4
	Не по теме: masli, попробуйте jsfiddle.net, там ничего сложного. 0

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	05.10.2018, 16:56 [ТС]	6
	https://jsfiddle.net/u6ym7fjs/... lGq6QDAuz0 0

@gogolik Monsieur Toxicité 2843 / 1892 / 813 Регистрация: 13.03.2010 Сообщений: 6,179
	05.10.2018, 16:58	7
	А в чем проблема? Ничего не обрезает. Если только, возможно, из-за высоты blog-cover в 15rem, но не думаю. Миниатюры 0

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	05.10.2018, 17:02 [ТС]	8
	Вот разрешение на браузере - 768 пикселей(плагин для firefox использую) плагин web developer Миниатюры 0

@masli 52 / 18 / 11 Регистрация: 27.03.2013 Сообщений: 789
	05.10.2018, 17:07 [ТС]	9
	а вот 420 пикселей Миниатюры 0

@gogolik Monsieur Toxicité 2843 / 1892 / 813 Регистрация: 13.03.2010 Сообщений: 6,179
	05.10.2018, 17:12	10
	masli, ну да, просто при уменьшении окна браузера режет. Это потому что пропорции не сохраняются. Высоту блока нужно указывать меньше тогда или использовать процены/vh. 1

@gogolik Monsieur Toxicité 2843 / 1892 / 813 Регистрация: 13.03.2010 Сообщений: 6,179
	05.10.2018, 20:14	12
	masli, ну я это и писал. ))) 0