Как сделать что бы картинки не обрезались при масштабировании?

Хочу сделать адаптивные фото с записями поверх, при уменьшении окна браузера до 950px у меня обрезается фото и текст съезжает, подскажите как сделать что бы изображение нормально уменьшалось и текст который поверх не съезжал.

Это уже не фото а фон насколько я понимаю, в таком случае тебе следует попробовать использовать background-size:cover; В таком случае картинка должна подстраиваться под размер области в которой она будет фоном. Изображение задайте блоку инлайн и допишите данные стили к тому же блоку:

.container_main {
position: relative;
padding: 60px;
margin-bottom: 15px;
min-height: 320px;
background-size: cover;
background-repeat: no-repeat;
}

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}