CSS/HTML Responsive Images Code For Website - Learn About Website | DaddyFile

0

Responsive Images Explain

Responsive images will automatically adjust to fit the size of the screen.
Resize the browser window to see the effect:

If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:


Html Code:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>

<h2>Responsive Images</h2>
<p>Responsive images will automatically adjust to fit the size of the screen.</p>
<p>Resize the browser window to see the effect:</p>

<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">

</body>
</html>








Html Code Result:





Post a Comment

 
Top