У меня есть div (с фоновым изображением), и ширина изображения составляет 40 пикселей.
Теперь, когда я изменяю ширину на 20 пикселей, она обрезает правую сторону изображения. Есть ли способ заставить его обрезать левую сторону?
Объяснение: У меня есть квадрат (4 изображения для углов и 1 изображение для верхней и нижней полосы (изображения полос только 1x20 с repeat-x)). Если я зайду на страницу приветствия, которая содержит только слово «Добро пожаловать!», Размер квадрата уменьшится. Если я зайду на страницу «Мой персонаж», размер квадрата увеличится.
То есть квадрат всегда будет соответствовать содержимому.
<table align="center">
<tr>
<td>
<div id="dynamic" class="DynamicWidth" >
<div class="ContentTL ContentCorners">
</div>
<asp:Panel ID="ContentTC" runat="server" CssClass="ContentTC ContentStrips">
</asp:Panel>
<div class="ContentTR ContentCorners">
</div>
<div class="ContentDiv">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="ContentBL ContentCorners">
</div>
<asp:Panel ID="ContentBC" CssClass="ContentBC ContentStrips" runat="server">
</asp:Panel>
<div class="ContentBR ContentCorners">
</div>
</div>
</td>
</tr>
</table>
Проблема: теперь, чтобы уменьшить и увеличить размер квадрата, я не могу использовать единицу измерения 'px', поскольку на экране приветствия ширина всего квадрата (2 угла и полоса) может составлять 200 пикселей, а на других страницах это будет 1000px.
Поэтому я решил использовать '%' - оба угла с одинаковым% ширины и шириной полосы будут заполнены до 100% (например, углы 3% каждый, полоса будет 96%)
Все хорошо, но есть проблема - мое угловое изображение выглядит так - внизу справа (
) и внизу слева (
). если страница действительно мала - мой левый угол в порядке, но мой правый угол теряет свою округлость - почти выглядит как квадрат. (3% от 200px действительно мало, и вместо обрезки левой части изображения оно обрезает правую, что приводит к потере круглого размера)
Решение: Чтобы эта вещь работала, я попросил вас обрезать изображение с другой стороны, но потом я подумал о другом решении: я взял нижнее левое изображение () и просто перевернул его (-moz-transform: scaleX(-1); У меня также есть оперы для оперы, сафари и IE), и ширина меняется при обрезке с другой стороны.
Кстати: теперь мне нужно только 2 изображения для углов вместо 4