Для создания дизайна страницы, где изображения с одинаковой шириной, но разной высотой должны быть корректно отображены внутри родительского div, можно использовать CSS свойства flexbox.
Пример кода для создания такого дизайна:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Images</title>
<style>
.image-container {
display: flex;
flex-wrap: wrap;
}
.image-item {
flex: 1 0 200px; /* Ширина изображения 200px, но может меняться */
margin: 5px;
}
.image {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<div class="image-item">
<img src="image1.jpg" alt="Image 1" class="image">
</div>
<div class="image-item">
<img src="image2.jpg" alt="Image 2" class="image">
</div>
<div class="image-item">
<img src="image3.jpg" alt="Image 3" class="image">
</div>
</div>
</body>
</html>
```
В данном примере, изображения будут располагаться внутри родительского div с классом "image-container" с помощью flexbox. Каждый элемент с классом "image-item" будет иметь ширину 200px и гибкую высоту. Образы с классом "image" будут занимать 100% ширины и автоматически подстраиваться по высоте в соответствии с их процентным соотношением.
Таким образом, при заполнении изображениями родительского div они будут отображаться корректно, с одинаковой шириной, но разной высотой.