I tried a Google search on this and still cannot figure out how to resize an image by its width for various mobile devices. Here is my attempt:
CSS:
img.test {
width: 100%;
height: auto;
}
HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<link rel="stylesheet" href="../includes/style.css">
</head>
<img class="test" src="../includes/foo.jpg">
But the image is still being loaded with its original scaling. I am a css and html newb so any help would be great!
Edit:
Thanks for the responses. Here is a revised version that now works.
HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<link rel="stylesheet" href="../includes/style.css">
</head>
<body width = "device-width">
<img class="test" src="../includes/buoy_map.jpg">
</body>
img
{
max-width: 100%;
min-width: 300px;
height: auto;
}
For me, it worked best to add this in image css: max-width:100%; and NOT specify image width and height in html parameters. This adjusted the width to fit in device screen while adjusting height automatically. Otherwise height might be distorted.
You can use the following css to resize the image for mobile view
object-fit: scale-down; max-width: 100%
img {
max-width: 100%;
}
Should set the image to take up 100% of its containing element.
if you use bootstrap 3 , just add img-responsive class in your img tag
<img class="img-responsive" src="...">
if you use bootstrap 4, add img-fluid class in your img tag
<img class="img-fluid" src="...">
which does the staff: max-width: 100%, height: auto, and display:block to the image
Source: Stackoverflow.com