Эффект, который вы описываете, действительно может быть достигнут. Вам просто нужно наложить то же изображение меньшего размера поверх изображения. Изображение внизу может быть затемнено, и оно будет охватывать оставшуюся часть области 400px x 400px.
Для этого вам необходимо установить поле position окружающего div на relative и оба изображения на absolute. Я уменьшил высоту изображения сверху до 200px и сохранил ширину изображения такой же, как и изображение внизу, чтобы оно соответствовало стилю изображения в вопросе. Используйте filter: blur(), чтобы размыть большее изображение. Размытие смягчает края изображения (удалите свойство clip, и вы узнаете). Используйте свойство clip, чтобы края выглядели «четкими».
Я использовал это изображение. Запустите приведенный ниже фрагмент кода, чтобы увидеть его в действии:
<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
margin: auto;
position: relative;
width: 50%;
}
.outer {
filter: blur(5px);
position: absolute;
z-index: -1;
clip: rect(0,400px,400px,0);
}
.inner {
position: absolute;
top: 100px;
}
</style>
<div class="container">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>
Это ответ на часть вашего вопроса. Теперь, чтобы автоматизировать размещение изображения в соответствии с размером, вы можете получать и обновлять размеры изображения, используя JavaScript:
var image = new Image();
image.onload = function() {
var height = image.height;
var width = image.width;
}
image.src = "<source>";
Изображение внизу всегда будет 400 x 400 px, вы можете обновить атрибуты изображение вверху в соответствии с его фактическими извлеченными размерами, если оно меньше 400 x 400 px. В противном случае сквашивайте sh до 400 x 400 px, чтобы покрыть все изображение внизу.