У меня есть отзывчивая веб-страница, которая внутри тега Div имеет тег IMG следующим образом:
<div id="frontPage">
<img src="img/bg.jpg" height="500px" width="100%">
</div>
Он отлично работает на рабочем столе. Однако использование CSS с помощью @media было бы здорово, если бы я не коснулся этого кода в теге Div выше. Когда я комментирую или удаляю этот код внутри тега Div и использую CSS для добавления одного и того же изображения с помощью CSS, он выглядит увеличенным и уродливым, а не тем, что он находится в обычном старом HTML-формате, поэтому я стараюсь избегать использования CSS и вместо этого другим способом, например, с использованием Javascript.
Это код, который я использую в CSS, который выглядит уродливым:
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
}
Он выходит Zoomed in и уродливый и хорошо, я попробовал все, что я могу, включая изменение высоты и ширины, как в теге IMG, и его усечение, что он не выйдет так же, как в теге IMG в коде html.
Есть ли какой-либо возможный способ сделать это. Используя Javascript, где будет следовать код Phseudo, выполните следующие действия:
<script type="text/javascript">
//Phseudo Code
if (mobileScreenSize == 480){
//Mobile Image
<img src="img/mobileImage.jpg" height="500px" width="100%">
}
else
{
//Regular desktop image
<img src="img/bg.jpg" height="500px" width="100%">
}
</script>
Я не знаю, что еще попробовать, и я хочу, чтобы избежать использования CSS, поскольку он не кажется или я не знаю, как заставить его выходить, как он использует HTMl IMG тег.
Если вы хотите использовать CSS для изменения фонового изображения, вам нужно установить свойство "background-size". Например,
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
background-size: 100% 450px;
}
Если вы хотите использовать javascript-подход, то это также прекрасно и способ добавления изображения в div - это сделать что-то вроде этого.
var elem = document.createElement("img");
elem.setAttribute("src", "img/bg.jpg");
elem.setAttribute("height", "450px");
elem.setAttribute("width", "100%");
document.getElementById("frontPage").appendChild("elem");