Как заставить изображение загружаться только на мобильные экраны и быть отзывчивым?

Question

Я бы хотел, чтобы мое изображение загружалось только на экраны определенного размера (мобильные). Я также хотел бы, чтобы изображение было отзывчивым, чтобы оно не искажалось. Я написал некоторый код, но он не работает. Прямо сейчас изображение занимает весь размер окна моего браузера и загружается на все размеры экрана.

У кого-нибудь есть идеи, как мне это исправить? Вот скрипка моего текущего кода.

HTML:

<img id="yourimage" src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">
<p>
    Why does the image warp when resizing why doesn't it only open on 500px screens and lower?
</p>

CSS:

 #yourimage {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
}

@media (max-width: 500px) {
    #yourimage {
        display: block;
    }
}

JS:

function showPopup() {
    document.getElementById('yourimage').style.display = 'block';
}
showPopup(); // show modal image. 

function closePopUp() {
    document.getElementById('yourimage').style.display = 'none';
}

document.getElementById('yourimage').addEventListener('click', closePopUp); // hide modal image

Answer 1

Удалите showPopup() из js, тогда он будет работать правильно

Answer 2

Просто удалите вызов функции showPopup() javascript. Я также рекомендую вам использовать @media only screen and (max-width: 500px) вместо @media (max-width: 500px):

function showPopup() {
  document.getElementById('yourimage').style.display = 'block';
}

function closePopUp() {
  document.getElementById('yourimage').style.display = 'none';
}

document.getElementById('yourimage').addEventListener('click', closePopUp); // hide modal image

#yourimage {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

@media only screen and (max-width: 500px) {
  #yourimage {
    display: block;
  }
}

<img id="yourimage" src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">

<p>
  Why does the image warp when resizing why doesn't it only open on 500px screens and lower?
</p>

Answer 3

Ваша проблема в том, что javascript заменяет display: block внутри css на display = 'block', который вставляет с showPopup ();

function showPopup() {
  document.getElementById('yourimage').style.display = 'block';
}
// showPopup();

function closePopUp() {
  document.getElementById('yourimage').style.display = 'none';
}

document.getElementById('yourimage').addEventListener('click', closePopUp); // hide modal image

#yourimage {
  display: none;
    position: absolute;
  top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

@media (max-width: 500px) {
  #yourimage {
    display: block;
  }
}

HTML:
<img id="yourimage" src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">

<p>
Why does the image warp when resizing why doesn't it only open on 500px screens and lower?
</p>