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

Question

我想让我的图像仅在特定尺寸的屏幕（移动设备）上加载。 我还希望图像具有响应性，以免变形。 我写了一些代码，但它不起作用。 现在，图像占据了我的浏览器 window 的整个大小，并在所有屏幕尺寸上加载。

有谁知道我该如何解决这个问题？ 这是我当前代码的小提琴。

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() javascript function 的调用。 我还建议您使用@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 2

从js中去掉showPopup() ，就可以正常工作了

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>