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

Question

我正在创建一个离子应用程序，因为我需要在我的主页中以两行添加四个图像，每行有两个图像。图像大小为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
}

Answer 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> 

Answer 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;
}