Sizing Images

The entry page of readcereal.com (captured on 18/03/2019)
  1. the image size is unknown
  2. the image occupies full width of the containing element
  3. the image keeps its aspect ratio
  4. the containing element and the image automatically change its size to fit to each other (I am not sure now if this requirement can be fulfilled.)
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<link rel="stylesheet" type="text/css" href="style.css" /><title>Responsive image</title></head>
<body>
<div></div>
</body>
</html>
div {
max-width: 1080px; // to control the max width
min-width: 960px; // to control the min width
margin: 0 auto; // center the div
}
div {
// insert the image to the background
background-image: url("/blog.jpg");
}
<div>
<img src="/blog.jpg">
</div>
div img {
width: 100%;
}
div img {
width: 100%; // fully occupy the parent element width
height: auto; // for readability
}
div {
max-width: 1080px; // to control the max width
min-width: 960px; // to control the min width
margin: 0 auto; // center the div
}
div {
width: 100%;
height: auto; // for readability
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store