如何仅在移动屏幕上加载图像并做出响应？

Question

I would like to make my image load only on screens of a certain size (mobile). I would also like the image to be responsive so that it doesn't warp. I have written some code but it doesn't work. Right now the image takes up the entire size of my browser window and loads on all screen sizes.

Does anyone have any idea on how can I fix this? Here is a fiddle of my current code.

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

Just remove the call of the showPopup() javascript function. I also recommend you to use @media only screen and (max-width: 500px) instead of just @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 2

Remove showPopup() from js, then it will work correctly

Answer 3

Your problem is that javascript overwrites the display: block inside the css with the display = 'block' which inserts with 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>