javascript - 在 href 100% 高度下制作图片

标签 javascript css wordpress

我打开类似的主题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/

相关文章:

javascript - promise 从阵列顺序触发

css - 卡住关键帧动画以进行调试

javascript 焦点函数没有按预期工作

php - 多个 WordPress 循环

ios - iOS 设备上的网页为空白

css - 如何删除 Wordpress 页脚下的空白区域?

javascript - SVG 上的单击事件在 Safari 中不起作用

javascript - 在 Node 中使用串联的简单 JS require/include/import 工具

javascript - 选择保存图像的目录

jquery - HTML 链接无效。输出 "Your connection is not private"