时间戳

首页 > 解决方案 > 无论屏幕大小如何，都能保持图像分辨率

html - 无论屏幕大小如何，都能保持图像分辨率

问题描述

我正在 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>

标签： htmlcssionic4

解决方案

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

Rudi Urbanek 的回答只是将图像的视口大小加倍，所以如果您的图像是 666 像素并且您的视口宽度是 300 像素；图像将显示在600px。

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

所以....

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

它还有助于了解两件事：

  • 没有宽度或高度的HTMLimg标记将始终默认为图像的自然大小。
  • 在某些情况下，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=""or height=""，所以这对这种情况很有好处。

（参考）

推荐阅读