<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
margin: auto;
object-fit:scale-down;
}
</style>
</head>
<body>
<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (in col):</p>
<div style= "width: 1600px; height: 600px; background-color: yellow; margin: 0; justify-content: center; display: flex; ">
<img class="two" src="ocean.jpg" width="100%" height="100%">
</div>
</body>
</html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
margin: auto;
object-fit:scale-down;
}
</style>
</head>
<body>
<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (in col):</p>
<div style= "width: 1600px; height: 600px; background-color: yellow; margin: 0; justify-content: center; display: flex; ">
<img class="two" src="ocean.jpg" width="100%" height="100%">
</div>
</body>
</html>
Chỉnh sửa lần cuối: