I'm trying to ensure that my image only loads on mobile screens and remains responsive so it doesn't stretch. However, the code I've written isn't working as expected. Currently, the image takes up the whole browser window and appears on all screen sizes.
Any suggestions on how to resolve this issue? Here is a fiddle with 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