所以...

Question

我正在开发基于ionic 4的移动应用程序，该应用程序在主屏幕上具有图像。无论屏幕尺寸如何，我都希望保持图像的分辨率。也就是说，如果屏幕为300像素宽，则我的图像仍为666像素宽，您只需要左右滚动即可查看整个内容。

我尝试在css文件中将像素的宽度和高度标记为“！important”，只是将图像压扁

http代码

      <head>
        <style>
        .map
        {
          position: relative;
          top: 0;
          left: 0;
          height: 887px !important;
          width: 666px !important;
        }

   </style>
 </head>


 <ion-content padding>
   <pinch-zoom>
     <div>
       <img class = "map"
       id = "map"
       src = "../../assets/img/limerickmap.JPG"
       alt = "map"/> 
       <img class = "avatar"
       id = "avatar"
       src = "../../assets/img/satan.png"
       alt = "avatar" />
     </div>
   </pinch-zoom>  

 </ion-content>

Answer 1

无论视口大小如何，您都希望保持图像分辨率。

Rudi Urbanek的答案只是将图像的视口大小加倍，因此，如果您的图像是666px，视口宽度是300px，图像将显示在600px。

这不能解决您提出的问题。

所以...

相反，您应该将宽度设置为“自动”，浏览器将采用指定的/子元素（图像）的宽度。

了解两件事也有帮助：

HTML img标签将始终默认为图像的自然尺寸。
CSS百分比宽度或高度将是父屏幕大小或的百分比。

尝试一下：

    .map
    {
        position: relative;
        top: 0;
        left: 0;
        height: auto;
        width: auto;
        overflow: visible; /* should not be needed but will ensure your image is not cut off */
    }

您的<img>标记已经没有指定width=""或height=""，因此对这种情况很有用。

（Reference）

Answer 2

如果图像大于您喜欢的尺寸，请使用最小宽度，也可以添加最大宽度，也不要使用高度，以便按比例缩放

img {
  min-width: 200%;
  max-width: 200%;
}

<img src="https://cdn.spacetelescope.org/archives/images/thumb700x/heic0910s.jpg">

无论屏幕大小如何，都可以保持图像分辨率

2 个答案:

所以...