How to responsive image in ionic from different screen size?

Question

I am creating an ionic app, in that I need to add a four images in my home page in two row and each row has two images. The images size is 296*296. I have tried the below code,

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 }

developer · Accepted Answer · 2017-02-02 05:27:03Z

0

Your ids for div and img are same i.e img1. Change the id and then try. And make width and height important may be some other css overwrites it. Tell me if this works or not.

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

answered Feb 2, 2017 at 5:27

developer

601 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ashu Over a year ago

I have change according but not working.Actually UI is responsive in browser responsive tag but when I run on android device then screen is not responsive.

developer Over a year ago

Will you please provide some more explanation or your plunker or fiddle something.

Ashu Over a year ago

This is my first application in ionic and I know only basic concept.what actually I am trying to do is I want four images below the header in two row and each row has two images but when I run the code on ionic run android the application is install but the screen is not responsive but the same screen is responsive when I run ionic run browser i.e. on browser.I am not getting what's the problem.

developer Over a year ago

You may try media queries like for iphone 6 it is : @media(max-width:750px) and (max-height:1334px){-----css-------}

Fazlan Mohammed · Accepted Answer · 2017-02-02 10:14:28Z

I also got this issue. This code might help to you

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

Collectives™ on Stack Overflow

How to responsive image in ionic from different screen size?

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related