I'm trying to display an image for mobile devices only, but when I resize the browser or select different mobile device my image resizes, which is not what I want. I use vh unit so my image looks the same on all widths. Here's the snippet:
#main-pic {
border: 2px solid red;
background-image: url(https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
height: 55vh;
min-width: 100%;
background-size: cover;
background-repeat: no-repeat;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="main-pic"></div>
</body>
</html>In my real-life project, this photo is in Bootstrap grid and I use @media queries to specify the width of devices.
EDIT: To clarify, I want to display full image no matter what screen size it is
EDIT 2: Ok, so let's assume I'm trying to display the full image, keeping it's ratio - for every mobile device - in a grid (col-sm-10, taking it's full width), what would be the suggestions for making it look good?
Ok, so let's assume I'm trying to display the full image, keeping it's ratio - for every mobile device - in a grid (col-sm-10, taking it's full width), what would be the suggestions for making it look good?
Use background-size: contain
(Additionally you could use a background-color to fill the areas of the div which are not covered by the background-image).