Вертикальное и горизонтально отзывное изображение

Question

У меня есть изображение наложения, которое должно реагировать вертикально и горизонтально, чтобы работать на рабочем столе и на мобильном устройстве.

Редактировать: Вертикально отзывчивым, я имею в виду, что он должен оставаться внутри окна, а не переполняться ниже нижней части экрана.

На изображении находится элемент, который должен оставаться в одном месте, а изображение должно сохранять соотношение сторон.

Я бы предпочел сделать это с чистым CSS, но мог бы использовать JS для совместимости браузера или более простого решения.

http://codepen.io/brooksroche/pen/mEgJmd?editors=1100

<div class="container"> 
    <div class="img-container"> 
    <img src="http://placehold.it/300X200"> 
    <div class="example"></div> 
    </div> 
</div> 

.container { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
} 

.img-container { 
    position: relative; 
    margin: 0 auto; 
    border: 1px solid red; 
    width: 300px; 
    max-width: 100%; 
} 

.img-container img { 
    display: block; 
    max-width: 100%; 
    max-height: 100%; 
} 

.example { 
    position: absolute; 
    border: 1px solid blue; 
    top: 40%; 
    left: 30%; 
    width: 38%; 
    height: 20%; 
} 

Answer 1

Попробуйте установить ширину и высоту авто:

.img-container img { 
display: block; 
width: auto; 
height: auto; 
} 

Или я установить ширину или высоту, а затем автоматический другой, который работал.

Answer 2

Просмотрите мультимедийные запросы CSS.

max-width и max-height Атрибуты CSS должны быть способны решить вашу проблему, как только вы выберете соответствующие точки останова для размеров экрана, которые вы хотите покрыть.

Отъезд this Stack Overflow post.

Answer 3

Update

Я только что обновил codepen & также металлообрабатывающая код здесь.

<div class="container"> 
    <div class="img-container"> 
     <img src="http://placehold.it/500X300"> 
     <div class="example"></div> 
    </div> 
</div> 

.container { 
    border: 1px solid red; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

.img-container { 
    position: relative; 
    overflow: hidden;  
    display: flex;  
} 

.img-container img { 
    display: block; 
    max-width: 100%; 
    margin: auto; 
} 

.example { 
    border: 1px solid blue; 
    height: 20%; 
    position: absolute;  
    width: 100%; 
    top: 50%; 
    transform: translateY(-50%);  
} 

Здесь работает codepen