Вы можете просто использовать CSS-свойство max-width
для автоматического изменения размера большого изображения, чтобы оно могло поместиться в контейнер меньшей ширины <div>
, сохраняя при этом его соотношение сторон.
Кроме того, вы можете применить свойство max-height
, если у вас есть элемент <div>
с фиксированной высотой, чтобы изображение не выходило за пределы границы <div>
по горизонтали или вертикали.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resize Image Proportionally with CSS</title>
<style>
img{
max-width: 100%;
max-height: 100%;
display: block; /* remove extra space below image */
}
.box{
width: 250px;
border: 5px solid black;
}
.box.large{
height: 300px;
}
.box.small{
height: 100px;
}
</style>
</head>
<body>
<h2>Изображение внутри div с автоматической высотой</h2>
<div class="box">
<img src="images/sky.jpg" alt="Облачное небо">
</div>
<br>
<h2>Изображение внутри большого div</h2>
<div class="box large">
<img src="images/sky.jpg" alt="Облачное небо">
</div>
<br>
<h2>Изображение внутри маленького div</h2>
<div class="box small">
<img src="images/sky.jpg" alt="Облачное небо">
</div>
</body>
</html>