Имея источник изображения как dataurl, есть ли способ получить высоту и ширину изображения в javascript или PHP, чтобы я мог установить их как свойства div?Получить высоту и ширину изображения из dataurl
или есть лучший способ сделать размер div до размера изображения. Учтите, что изображение используется как свойство background-image в CSS div.
Если вы знаете соотношение сторон изображения, то вы можете создать отзывчивый <div>, который «имитирует» собственный элемент <img> при изменении размера страницы.
Например, если у вас есть изображение, которое 300x180 - то соотношение сторон
1: 0,6
(180/300 = 0,6) Это означает, что, если изображение 100% широкий, то он на 60% выше.
.image {
background-image: url(http://lorempixel.com/output/nature-q-c-300-180-1.jpg);
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 60%;
}
Смотреть это jsFiddle
вы можете, но это займет некоторое время, чтобы принести 2-ую копию изображения, читать высоту, когда он загружает, а затем изменить стиль вашего Div в. это может быть довольно кричащим на экране, жесткое кодирование - лучше UX. – dandavis
ОК. Это действительно так. Как и в вопросе, нет ли способа сделать размер div на основе фонового изображения после загрузки? –
Я так не верю. идти другим способом легко (bg для соответствия div). вы можете попробовать неинтерактивный div div, который не масштабирует изображение и прозрачен там, где изображение не достигает. указатель события: нет; – dandavis