无论屏幕尺寸如何，都保持图像分辨率

Question

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

我尝试在 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

只需使用 min-width 如果您的图像大于您喜欢的尺寸，您可以添加 max-width 也不要使用高度，因此它会按比例缩放

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

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

Answer 2

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

Rudi Urbanek 的回答只是将图像的视口大小加倍，所以如果你的图像是 666px 而你的视口宽度是 300px；图像将显示在 600px.

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

所以....

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

了解两件事也有帮助：

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)

无论屏幕尺寸如何，都保持图像分辨率

Maintain image resolution regardless of screen size

html

css

ionic4

所以....