Как изменить размер изображения на экран браузера

Question

Привет Я работаю над простым изменением размера изображения только в html/css (нет js), особенно для мобильных устройств.

Я хочу ограничить максимальную высоту и ширину до 100% и не деформировать изображение. Я создал простое масштабирование на основе флажка, но элемент должен иметь позицию: абсолютный, и это проблема для других элементов (она покрыта).

Все кажется на первый взгляд, что работает .. но контейнер для изображения имеет фиксированную высоту сверху, а также элементы p, и в этом проблема.

Пожалуйста, проверьте тэ код:

Jsfiddle

Простой HTML

<p>some text...</p> 
<input id="zoom" type="checkbox"> 
<label for="zoom" class="container"> 
    <img alt="kitten" src="http://placekitten.com/g/600/300"/> 
</label> 
<p>some another text</p> 

В CSS

* { 
    margin:0 auto; 
} 
html, body{ 
    width:100%; 
    height:100%; 
    text-align:justify; 
} 
p{ 
    display:block; 
    height:25%; 
    overflow:hidden; 
} 
label + p { 
    position:absolute; 
    top:260px; 
    height:auto; 
} 
#zoom{ 
    display:none; 
} 
input + .container { 
    position:absolute; 
    z-index:9999; 
    top:25%; 
    right:0; 
    left:0; 
    bottom:0; 
    width:300px; 
    height:150px; 
    text-align:center; 
    cursor:pointer; 
    display:block; 
    -webkit-transition: height .4s, width .4s, background-color .4s, top .4s; 
    transition: height .4s, width .4s, background-color .4s, top .4s; 
    background-color: rgba(0,0,0,0) 
} 
input:checked + .container { 
    position:fixed; 
    top:0%; 
    right:0; 
    left:0; 
    bottom:0; 
    width:100%; 
    height:100%; 
    background-color: rgba(0,0,0,0.8); 
} 
input + .container img{ 
    max-width: 100% !important; 
    max-height: 100% !important; 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

Answer 1

Попробуйте удалить width: 300px от входа + .container

Пожалуйста, проверьте тэ код: Jsfiddle

Answer 2

Проверьте это fiddle, я добавил дополнительный контейнер и проведенную некоторые CSS манипуляции, также добавил больше текста вокруг, чтобы проверить правильное поведение изображения

<label for="zoom" class="container"> 
    <div class="shadowbox"> 
     <img alt="kitten" src="http://placekitten.com/g/600/300"/> 
    </div> 
</label> 

Answer 3

Попробуйте

JS FIDDLE

HTML:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus augue non sapien. Aliquam id dolor. Nulla quis diam.Praesent dapibus. Nullam at arcu a est sollicitudin euismod.</p> 
<div class="layer"> 
<input id="zoom" type="checkbox"> 
<label for="zoom" class="container"> 
    <img alt="kitten" src="http://placekitten.com/g/600/300"/> 
</label> 
</div> 
<p> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus augue non sapien. Aliquam id dolor. Nulla quis diam. Praesent dapibus. Nullam at arcu a est sollicitudin euismod. Curabitur vitae diam non enim vestibulum interdum. Sed ac dolor sit amet purus malesuada congue. Suspendisse nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Pellentesque arcu. Nunc auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris tincidunt sem sed arcu. Pellentesque ipsum. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. 
</p> 

CSS

* { 
margin:0 auto; 
} 
html, body{ 
width:100%; 
height:100%; 
text-align:justify; 
} 
p{ 
padding: 5px; 
display:block 
overflow:hidden; 
} 
label + p { 
position:absolute; 
height:auto; 
} 
#zoom{ 
display:none; 
} 
.layer{ 
display: inline-block; float: left; position: relative; 
} 
input + .container { 
top: 0%; 
left: 0; 
z-index:9999; 
cursor:pointer; 
width: 300px; 
height: 150px; 
display:block; 
-webkit-transition: height .4s, width .4s, background-color .4s, top .4s; 
transition: height .4s, width .4s, background-color .4s, top .4s; 
background-color: rgba(0,0,0,0) 
} 
input:checked + .container { 
position:fixed; 
top:0%; 
right: 0; 
left:0; 
bottom: 0; 
width:100%; 
height:100%; 
background-color: rgba(0,0,0,0.8); 
} 
input:checked + .container img{ 
height: 100%; width: 100%; 
} 
input + .container img{ 
max-width: 100% !important; 
max-height: 100% !important; 
position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
}