CODEWITHSUNDEEP
csshtml
Trind 07
Trind 07

Reputation: 919

How to show an image fit to mobile screen?

I have tried to implement a responsive web page to view an image. In order to do that, I use HTML5. Below is an example code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        .center{margin: 0px auto; display: block;}
    </style>
</head>
<body>
    <picture>
        <source media="print" srcset="https://www.mywebsiteurl/point_th@monochrome">
        <source media="(max-width: 480px)"
                srcset="https://www.mywebsiteurl/point_th@1x">
        <source media="(max-width: 640px)"
                srcset="https://www.mywebsiteurl/point_th@2x">
        <source media="(max-width: 1024px)"
                srcset="https://www.mywebsiteurl/point_th@4x">
        <img src="https://www.mywebsiteurl/point_th@4x" class="center">
    </picture>
</body>
</html>

And this is the view of website from my cellphone (Samsung Galaxy S6 Edger):

View from my cellphone

From the view of my cellphone, I see there is a white space around my picture. So how can I make it fit to the screen without white space?

Upvotes: 0

Views: 77

Answers (4)

Tushar Shukla
Tushar Shukla

Reputation: 6645

I have the same answer as others have however i have one suggestion to add

Try using reset css or Normalize. Using any of these CSS files helps a lot especially in such case.

Codes mentioned in answer like

*{
    margin:0; 
    padding:0;
 }


are already there in these files. It has a lot more content that removes default styling of browsers and gives you a neat and clean way to define your own CSS.

Upvotes: 0

Jesse Elser
Jesse Elser

Reputation: 976

Try

* {
 margin: 0;
 padding: 0;
}

This will set the margin and padding of all elements to 0 but be sure this is the first thing in your CSS file.

You can also try

picture {
 height: 100vh; // vh is viewport height
 width: 100vw; // vw is viewport width
}

Upvotes: 2

hoffman
hoffman

Reputation: 42

Some browsers will have default body margin. u can remove it by:

body {
    margin: 0px;
}

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

The must be the problem of body default spacing

body has a default spacing in every html page we need to set it to 0

body{
  margin:0;
  padding:0;
}

Upvotes: 1

Related Questions