How to resize image to browser screen

Question

Hi I working on simple image resize to only in html/css (no js) especially for mobile devices.

I want to limit the maximum height and width to 100% and not deform the image. I created a simple checkbox-based zooming, but the element must have position: absolute, and that is a problem for other elements (it's covered).

Everything seems at first glance that works.. but the container for the image has a fixed height from the top as well as elements p, and that's the problem.

Please check te code :

Jsfiddle

Simple 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>

The 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

Try this

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%);
}

Answer 2

Check this fiddle, I've added extra container and perfomed some css manipulations, also added more text around to test correct behavior of image

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

Answer 3

Try removing the width: 300px from input + .container

Please check te code :Jsfiddle