Изменение размера background-image

@frenchi · Регистрация: 15.11.2010

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

Здравствуйте, столкнулся с проблемой, прошу помощи. Необходимо как то сделать так, чтобы размер элементов списка менялся в зависимости от разрешения экрана, при этом учитывался background-position. Сейчас же, при более низком разрешении элементы списка выходят за нужные границы.

CSS

.ul
{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.ul li a
{
 display: block;
 height:70px;
}
.ul li a:hover
{
 background-position: 100% 0;
}
 
a.name1
{
 width:75px;
 background: url(/images/blabla/1.jpg) 0px 0px no-repeat;
}
a.name2
{
 width:105px;
 background: url(/images/blabla/2.jpg) 0px 0px no-repeat;
}

HTML5

<ul>
 <li><a class="name1" href=""></a></li>
 <li><a class="name1" href=""></a></li>
</ul>

@mrtoxas · 16.06.2017, 22:30

По приведенному вами коду сложно что-то сказать. Приведите код, который даст возможность воспроизвести проблему. Можно даже прикрепить к сообщению архив с html и фоном.

@frenchi · 17.06.2017, 22:05 **[ТС]**

Попробую упростить

, нужно при изменении разрешения до 320px изменить относительный размер ссылки к примеру в 1.3 раза.

HTML5

<style type="text/css">
a.name
{
 display:block;
 width:100px;
 height:100px;
 background-color: #fff;
}
 
@media only screen and (max-width: 320px) {
    
}
</style>
 
<a class="name" href=""></a>

@mrtoxas · 18.06.2017, 00:25

Легче не стало. Есть же медиа-запрос - указывайте там размер ссылки. Если нужно менять размер фона, тогда задавайте еще и стиль background-size.

Рыжий Лис · 18.06.2017, 12:08

Сами же ответили на свой вопрос:

CSS

a.name {
 display:block;
 width:100px;
 height:100px;
 background-color: #aaa;
}
 
@media only screen and (max-width: 320px) {
    a.name  {
        width:30px;
        height:30px;
    }
}

Добавлено через 1 минуту
А ещё может помочь overflow-x: hidden;

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	16.06.2017, 22:30	2
	По приведенному вами коду сложно что-то сказать. Приведите код, который даст возможность воспроизвести проблему. Можно даже прикрепить к сообщению архив с html и фоном. 1

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	18.06.2017, 00:25	4
	Легче не стало. Есть же медиа-запрос - указывайте там размер ссылки. Если нужно менять размер фона, тогда задавайте еще и стиль background-size. 0

	18.06.2017, 12:08

Опции темы