How to make image adjust to the mobile screen

Question

I am using the carousel example from here: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp I have some example images from my app which I took from my mobile 5.7 inch with print screen and removed the notification bar up (which shows the signal etc). I am trying to make these example images (carousel) the same height and width of my screen without to have the user, to scroll down or right to see the image full. So the user will see an action bar (the one that apps have beause it will open in a webview) and the carousel only. I tried changing the width and height of the images without success.

UPDATE: Based on Metatron5 answer , I changed the code and it works in firefox for android but it doesn't recognize the vh and vw in the android webview

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Carousel</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <style>
    
    
      </style>
    </head>
    <body>
    
    
      
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="begin.png" alt="" style="height: 100vh; width: 100vw;">
          </div>
    
          <div class="item">
            <img src="first.png" alt="" style="height: 100vh; width: 100vw;">
          </div>
        
          <div class="item">
            <img src="second.png" alt="" style="height: 100vh; width: 100vw;">
          </div>
    
          <div class="item">
            <img src="third.png" alt="" style="height: 100vh; width: 100vw;">
          </div>
        </div>
    
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    
    </body>
    </html>

@Metatron5 sorry update! i tried and it seems to work in firefox for android. I think its the best way, thank you! :) , the problem now is that it doesn't work in the android webview and has a blank in the right — JonAte, Feb 11 '19 at 14:21
hmm it seems that webview doesn't support vh and vw: https://github.com/facebook/react-native/issues/7103 — Metatron5, Feb 11 '19 at 14:31
@Metatron5 unfortunately yes, I came accross that link now. :/ I am not sure what else I can do — JonAte, Feb 11 '19 at 14:36
does this link may help? https://stackoverflow.com/questions/32729416/html-height-100-ignored-by-webview — Metatron5, Feb 11 '19 at 14:39
@Metatron5 thank you for that, I checked and I have this right, android:layout_height="match_parent" — JonAte, Feb 11 '19 at 14:44
@Metatron5 i tried style="height: 100%; width: 100% but it still shows a small blank next to carousel and also have a down scroll for user to see full image, (like before) — JonAte, Feb 11 '19 at 14:51
could you give the body a width of 100vw and a hight of 100vh. Leave the picture with the % — Metatron5, Feb 11 '19 at 14:59
@Metatron5 added this .carousel-inner { height: 100vh; width: 100vw; } but I don't see any difference. Android version is 4.3 so I suppose webview doesn't support vh , vw unfortunately — JonAte, Feb 11 '19 at 15:13
set imageView height width match parent and add this android:scaleType="fitXY" in xml imageview — Vipul Chauhan, Feb 11 '19 at 15:27
@Metatron5 i don't know why but i believe even if i restarted my phone. some cache maybe stayed on app and it stucked on that carousel with the blank. I cleared the app data and I also changed the style of img to style="height: 100%; width: 100% and it seems to work :) thanks — JonAte, Feb 11 '19 at 16:38
i see android tag that's why i give you this answer sorry buddy — Vipul Chauhan, Feb 12 '19 at 07:56

Metatron5 · Answer 1 · 2019-02-12T07:12:39.380

0

Like in the Comments the Problem seemed to be that there was some Cashe on the phone, which where the reason the style didn't work. So it finally worked, but I want to make a note, that the Units vh and vw are not working in Androit Webview.

edited Feb 12 '19 at 07:12

answered Feb 11 '19 at 14:24

Metatron5

315
2
11

score -1 · Answer 2 · answered Feb 11 '19 at 15:03

-1

I have also run into the same problem a few month back. VH & VW wern't working on Google TV. So, I solved this problem with JavaScript. Try to add the following code in your script file:

const sliderImages= document.querySelectorAll('carousel-inner .item');

window.onload = function (e) {
    sliderImages.forEach(sliderImage=> {
        sliderImage.style.height = `${this.innerHeight}px`;
        sliderImage.style.width = `${this.innerWidth}px`;
    });
}

window.onresize= function (e) {
    sliderImages.forEach(sliderImage=> {
        sliderImage.style.height = `${this.innerHeight}px`;
        sliderImage.style.width = `${this.innerWidth}px`;
    });
}

answered Feb 11 '19 at 15:03

Shuvo

1,253
9
18

is there really no other solution but using js for the problem? – Metatron5 Feb 11 '19 at 15:10
Well, I think using JS is cross-browser solution. If this small piece of code creates a problem for you then you can ignore JS. But don't know how to detect Wnidow/Browser width & height using CSS other than `VH` & `VW`. – Shuvo Feb 11 '19 at 15:13
Do you have any js file? If you have, then paste the code at the end of the file or You can create a js file and paste the code and add the js file before the closing `
` tag.
– Shuvo Feb 11 '19 at 15:14
I did a new .js file. Does it work in android 4.3 webview? It still appears the same problem. Does the webview do refresh when i close and reopen the app? – JonAte Feb 11 '19 at 15:20
Did you remove inline styles from slider images? `` Remove these styles. After that if the problem exists then you may show me your problem using screen sharing like in skype or something like that – Shuvo Feb 11 '19 at 15:27
here the code I used. now the only problem is that user must scroll down to see full image https://paste.ee/p/sbXiQ#UJtp5KiU5T77b3MsT5qJPh4xXLiqyb1D – JonAte Feb 11 '19 at 15:47

How to make image adjust to the mobile screen

2 Answers2