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

2admgd59 于 2022-10-31 发布在 Angular

关注(0)|答案(2)|浏览(151)

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

angularjs

来源：https://stackoverflow.com/questions/41994431/how-to-responsive-image-in-ionic-from-different-screen-size

2条答案

按热度按时间

ekqde3dh1#

你的div和img的id是一样的，例如img1。改变id，然后再试。使宽度和高度重要，可能是其他一些css覆盖它。告诉我，如果这工作与否。
第一个

赞(0）回复(0）举报 2022-10-31

umuewwlo2#

我也遇到了这个问题。这个代码可能对你有帮助
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;
}

赞(0）回复(0）举报 2022-10-31

我来回答

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

2条答案

相关问题

热门标签

最新问答