Question

嗨，我正在处理简单的图像调整大小，仅限于html / css（没有js），特别是对于移动设备。

我想将最大高度和宽度限制为100％并且不会使图像变形。我创建了一个简单的基于复选框的缩放，但元素必须具有position：absolute，这对于其他元素来说是个问题（它已被覆盖）。

乍一看似乎一切都有效......但是图像的容器从顶部和元素p都有一个固定的高度，这就是问题所在。

请查看代码：

简单的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

尝试从输入+ .container

中删除width: 300px

请查看代码：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%);
}

如何将图像大小调整到浏览器屏幕

3 个答案: