我打开类似的主题2,3次并没有解决这个问题。我是编码方面的菜鸟,所以不要判断。我有默认情况下生成 900x600 图像的 wordpress 图库。对于小屏幕,它还可以,但对于 24.27 英寸,它真的很小,而且它在顶部,所以我决定将画廊图片大小更改为屏幕的 100% 高度,并在底部和顶部的容器上填充。所以现在我在 100% 高度内有带填充和图片的 div,但它们被裁剪了,因为我的屏幕不适合它们。我想弄清楚如何使我的图片成为我的主 block 的 100% 高度,它正在调整大小以适应所有屏幕。还有我在打开检查器并将 img 从 href 向上拖动到 1 级时提到的内容,它们正在调整我想要的 block 容器的大小。所以.. 我会给你们我所拥有的,也许有人会给我建议或解决方案。所有的答案对我来说都是金子)))
这是 HTML
<div class="container">
<div class="main gallery">
<div id="frame" style="overflow: hidden;">
<ul class="image-gallery" style="transform: translateZ(0px); width: 6104px;">
<li class="fade active" data-url-id="764"><a href="" class="thumb full_image" ind="0">
<img src="http://www.exmple.com/wp-content/uploads/2015/08/DSC06676print-21x15.-900x1323.jpg" class="attachment-gallery-scroll" ind="0"></a></li>
这是 CSS
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery {
float: none;
width: 100%;
height: 100%;
overflow: hidden;
padding-top: 120px;
padding-bottom: 120px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#frame {
height: 100%;
}
ul.image-gallery {
height: 100% !important;
}
li.fade {
height: 100% !Important;
margin: 0px !important;
padding: 0 !important;
}
a.thumb.full_image {
opacity: 1 !important;
padding: 0 !important;
}
img.attachment-gallery-scroll {
opacity: 1 !Important;
height: 100% !Important;
width: auto !important;
}
因此,当我之前说过要在代码检查器中拖动时,就像我更改this
<li class="fade active" data-url-id="764">
<a href="" class="thumb full_image" ind="0">
<img src="http://www.exmple.com/wp-content/uploads/2015/08/DSC06676print-21x15.-900x1323.jpg" class="attachment-gallery-scroll" ind="0"></a></li>
这个图像看起来很完美,它被放置在我的 div 中,它是我窗口的 100%,顶部和底部都有填充。
<li class="fade active" data-url-id="764">
如果有人会检查我的 website我也会插入链接。谢谢!!!很乐意提供任何帮助..
最佳答案
删除 href 上的“display: table-cell”属性可以解决高度问题。
在一个不相关的笔记上,你有一个标题标签
<meta name="viewport" content="width=device=width">
应该是
<meta name="viewport" content="width=device-width">
关于javascript - 在 href 100% 高度下制作图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32239135/