#html
#HTML
Вопрос:
Я хочу эту разметку:
<div style="background:url('Untitled.jpg');height:50px;width:50px;"></div>
вести себя как эта разметка:
<img src="untitled.jpg" width="50" height="50"/>
Разница между 2 заключается в том, что div не соответствует полному изображению. Он просто обрезает его, если полное изображение не может поместиться внутри контейнера. Однако тег img, как мы знаем, показывает полное изображение. Оно уменьшает изображение, но показывает его полностью.
Как я могу добиться того же в div в фоновом свойстве css? Если возможно, пожалуйста, не предлагайте css3, потому что мне это нужно для работы с IE8. Однако все в порядке. Вы все еще можете предложить.
Комментарии:
1. CSS2 не изменяет размер изображений AFAIK; вам нужно будет использовать сторонний инструмент, такой как ImageMagick, для изменения размера изображения.
Ответ №1:
Если фоновое изображение имеет размер 50×50 пикселей, то то, что вы показываете, должно работать нормально. Если div не растягивается, попробуйте добавить amp;nbsp; к нему.
Если вам нужно изменить размер фонового изображения, вам действительно нужно обратиться к CSS3, у которого есть background-size свойство.
Комментарии:
1. Я думаю, что OP ищет, чтобы изображение уменьшилось до 50×50. Хотя я могу ошибаться, OP должен был бы уточнить это.
Ответ №2:
Вам придется полностью сбросить div:
<div style="border: 0; margin: 0; padding: 0; background: url('Untitled.jpg'); background-size: 100%; width: 50px; height: 50px;"></div>
Комментарии:
1. К сожалению, нет. это свойство CSS3. Другого реального способа растянуть фоновое изображение только с помощью CSS нет. Вам нужно будет выполнить a
<div><img></div>и выполнить некоторое позиционирование / z-индексацию, чтобы подделать его.
Ответ №3:
фон: url («untitled.png») 0 0 без повтора; требуется для объявления свойства background полностью. или вы можете выбрать фоновое изображение, фоновое повторение и фоновую позицию.
Комментарии:
1. не работает с фоном: url («untitled.png») 0 0 без повтора; Я все еще вижу обрезанное изображение.
2. вы должны добавить размер изображения. ширина: px; высота: px;