Адаптивное изображение без CSS иначе портит HTML-страницу

0

У меня есть отзывчивая веб-страница, которая внутри тега 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 тег.

Теги:
responsive-design

1 ответ

1
Лучший ответ

Если вы хотите использовать 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");
  • 0
    Отлично, метод CSS работал, я не могу поверить, что я забыл этот маленький кусочек кода в теле CSS "background-size", спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню