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
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Software License Activation System Nulled

Announcing changes to the Float Multi-Sig

Agile is Organizational (Re-)Design

How To Fix Micromax Bolt Q339 Not Charging [Troubleshooting Guide]

Flipkart Runway — Experience (Selected for 3rd Year’s Internship)

DJIA and 31,213

Deploying Terrfaform Infrastructure Using Github, CodeBuild, and CloudFormation:

Building a Stock Option Valuation Model with Python: Part II

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
Chun Ming Wang

Chun Ming Wang

More from Medium

How to add multiple markers in map ?

Local storage — beginner’s guide

A beginner’s guide to Progressive Web Applications

Layers and Selections in SVG maps