如何從不同的屏幕尺寸響應離子圖像？

Question

我正在創建一個離子應用程序，因為我需要在我的主頁中的兩行中添加四個圖像，並且每行有兩個圖像。 圖像尺寸為 296*296。 我試過下面的代碼，

索引.html

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

主頁.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;
}