如何从不同的屏幕尺寸响应离子图像？

Posted 2023-03-06

【中文标题】如何从不同的屏幕尺寸响应离子图像？

【英文标题】：How to responsive image in ionic from different screen size?

【发布时间】：2017-06-19 01:33:26

【问题描述】：

我正在创建一个离子应用程序，因为我需要在我的主页中添加四张图片，分为两行，每行有两张图片。图像尺寸为 296*296。 我试过下面的代码，

index.html

<ion-nav-view class="container" >
</ion-nav-view>

Home.html

<ion-view view-title="HOME">
  <ion-content>
    <div class="row" >
      <div class="col-md-6 " id="img1">
         <img src="img/hard.png" class="img-responsive " id="img1" > 
      </div>
      <div class="col-md-6" id="img1">
         <img src="img/soft.png" class="img-responsive " id="img1"> 
      </div>
    </div>
      <div class="row" >
      <div class="col-md-6 " id="img1">
         <img src="img/welcome.png" class="img-responsive " id="img1" > 
      </div>
      <div class="col-md-6" id="img1">
         <img src="img/title.png" class="img-responsive " id="img1"> 
      </div>
    </div>
  </ion-content>
 </ion-view>

CSS

#img1
    width: 100%;
height: auto

【参考方案1】：

div 和 img 的 id 相同，即 img1。换个id再试试。并且使宽度和高度变得重要可能是其他一些 css 覆盖它。告诉我这是否有效。

#img2
 width: 100% !important;
height: auto !important;

<div class="col-md-6 " id="img1">
         <img src="img/hard.png" class="img-responsive " id="img2" > 
      </div> 

【讨论】：

我有更改但无法正常工作。实际上 UI 在浏览器响应标签中是响应式的，但是当我在 android 设备上运行时屏幕没有响应。

请您提供更多解释或您的笨拙或摆弄一些东西。

这是我在 ionic 中的第一个应用程序，我只知道基本概念。实际上我想做的是我想要两行标题下方的四个图像，每行有两个图像但是当我运行时ionic run android 上的代码应用程序已安装，但屏幕没有响应，但是当我在浏览器上运行 ionic run browser 时，同一屏幕有响应。我没有得到什么问题。

你可以尝试像 iphone 6 这样的媒体查询：@media(max-width:750px) and (max-height:1334px)-----css------ -

【参考方案2】：

我也遇到了这个问题。此代码可能对您有所帮助 html

    <div class="list card new-feeds wall-post">
    <div class="row">
        <div class="col">
            <div class="item item-image img4">
                <img src="img/hard.png">
            </div>
            <div class="item item-image img4">
                <img src="img/soft.png">
            </div>
            <div class="item item-image img4">
                <img src="img/welcome.png">
            </div>
            <div class="item item-image img4">
                <img src="img/title.png">
            </div>
        </div>
    </div>
</div>

css

.wall-post .img4 
    width: 50%;
    float: left;
    height: 120px;

.img4 > img 
    height: 100%;
    width: 100%;
    object-fit: cover;