Я только что получил помощь в другом вопросе, который я недавно задал здесь в отношении спрайтов, но теперь, когда я их работаю правильно, я столкнулся с другой проблемой: как я могу масштабировать отображаемое изображение?Масштабирование спрайта изображения, используя процент: возможно?
Мой текущий код выглядит следующим образом:
<div class="index1"></div>
И CSS:
img.index1 {
margin:auto;
width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
Это базовый код, который работает, как есть, для отображения соответствующего изображения спрайта в абсолютном измерении от 258 * 300 пикселей. Проблема в том, что я также хочу установить ширину в 40%. Вот то, что я пробовал:
.index1 {
margin:auto;
width:40%;
max-width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
Если бы я использовать обычные изображения (т.е. не спрайты), я бы просто установить ширину до 40%, а изображение масштабируется красиво вмещающими дела. Это будет в соотношении, поэтому высота также уменьшается, без каких-либо искажений или обрезания изображения. Используя CSS выше, изображение не масштабируется, и поскольку ширина опущена, стороны обрезаются.
Цель состоит в том, чтобы настроить ширину в соответствии с различными ширинами браузера и просто поставить, я хочу реплицировать поведение изображения точно так же, как это было бы с простым изображением с установленной на нем процентной шириной , Я до сих пор не справился с этим. И нет, я не могу обойти проблему масштабирования.
EDIT: Следует также отметить, что настройка ширины браузера просто регулирует, какая часть изображения отключена.
Решение:
Во-первых, это работает только если у вас есть несколько изображений одного и того же размера (возможно, в той же пропорции, но я не проверял). Поэтому я попытаюсь объяснить решение, насколько это возможно, с помощью гипотетического примера:
Во-первых, вам нужно изображение с образцом. Это изображение ДОЛЖНО быть того же размера или отношения, что и изображения, которые вы будете отображать. Неважно, что такое изображение, но я пошел с прозрачным изображением.
Теперь предположим, что вам нужно 5 изображений в вашем спрайте, и они будут отображаться на главной странице. Давайте называть эти изображения index1.png, индекс 2.png и т.д. Вот в HTML, чтобы отобразить его:
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite1" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite2" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite3" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite4" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite5" src="Images/index.png" />
</div>
Вы заметите, что есть два изображения внутри DIV. Я получу значение названия класса div в одно мгновение. Класс trans показывает прозрачное изображение, а классы «sprite sprite5» показывают фактическое изображение. У меня есть два класса, назначенные для этого изображения, просто чтобы количество строк в моем CSS было минимальным и сделать глобальные изменения изображения намного проще. Вы также заметите, что разница между содержимым пяти divs - это просто второе имя класса для второго изменения изображения от sprite1 до 5. Я также объясню это через мгновение.
Теперь для CSS:
.stretch15 {
width:15%;
max-width:258px;
overflow:hidden;
position:relative;
margin:0px auto;
display:block;
}
.trans {
width:100%;
height:auto;
display:block;
margin:0;
padding:0;
}
.sprite {
position:absolute;
top:0;
max-width:none;
max-height:100%;
display:block;
}
.sprite1 {
left:0;
}
.sprite2 {
left:-100%;
}
.sprite3 {
left:-200%;
}
.sprite4 {
left:-300%;
}
.sprite5 {
left:-400%
}
Я использовал имя класса 'stretch15', чтобы показать ширину DIV. Я использую несколько div-ширины, поэтому я использовал какое-то произвольное имя 'stretch', а затем число, чтобы сообщить мне, что такое ширина. Таким образом, stretch15 говорит мне, что div будет шириной 15%, как видно из CSS.Изменяя ширину в CSS для этого div, вы по существу реплицируете функцию (которая, как мне известно, является недопустимым кодом, но это самый простой способ ее отображения).
Что касается sprite1 to 5, все они имеют одинаковые стили в классе спрайтов, поэтому все, что осталось, было для меня определить, в какую «левую» позицию можно начать отображение изображения. Вот почему изображения должны быть одинакового размера. Если вы перемещаете -100% влево (или на 100% вправо), вы должны приземлиться с левой стороны второго изображения. -200% осталось, вы попадаете на третье изображение и так далее.
Что касается остального материала, я честно не был уверен, почему они были там, кроме того, что они работают. То, что я сделал, это посмотреть исходный код за here. Кроме того, это действительно помогает, если у вас есть что-то вроде Firebug (расширение Firefox), где вы можете отключить стили, чтобы увидеть, как это влияет. Это поможет вам понять многое.
некоторая обратная связь по ответам будет приятной –
@GCyrillus: Извините. Я работаю на двух рабочих местах, и мне сложно ответить своевременно. Надеюсь, я скоро приеду к нему. – Hiigaran
oki, bon courage –