个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有一个名为“imgSlide”的 div，里面有一张图片。我将图像宽度设置为 100%，因为我需要它根据导航器大小重新缩放。现在，当我使用“转换”属性时，问题就来了，我向上移动了图像，但随后它留下了一个空间。
Image to explain better my problem even more
我想知道如何删除空格以便下面的部分(黄色条)可以向上移动。
我想要一个纯 css 解决方案，但是，如果绝对没有办法只用 css 来实现它，我想知道如何用其他方式解决这个问题。
PD:我不想在容器高度中使用像素或 em，因为当我缩小导航器时我需要重新缩放容器。
编辑:我上传了新图片，我认为它正确地解释了我正在寻找的内容。
#slide{
transform: translateY(-20%);
}
#imgSlide img{
display:block;
width:100%;
}
#content{
height:50px;
background:yellow;
}<body>
<header>
</header>
<section id="body">
<section id="slide">
<div id="imgSlide">
<img src="https://images2.alphacoders.com/209/209140.jpg"/>
</div>
</section>
<section id="content">
</section>
</section>
<footer>
</footer>
</body>最佳答案
如果我理解您的问题，您可以将图像和内容都包装在一个“容器”中。然后在这个新容器上应用转换。这意味着您将转换包含图像和内容的容器。我为您制作了一个示例 fiddle :https://jsfiddle.net/7ye5q8ke/2/
HTML:
<body>
<div id="container">
<section id="slide">
<div id="imgSlide">
<img src="https://images2.alphacoders.com/209/209140.jpg"/>
</div>
</section>
<section id="content">
</section>
</div> <!-- Div Container END -->
</body>
CSS:
#slide{
}
#imgSlide img{
display:block;
width:100%;
}
#content{
height:50px;
background:yellow;
}
#container{
transform: translateY(-20%);
}
编辑:
注意到 fiddle 不工作了。更新的 fiddle
编辑 2:
在您的评论中，您问的是它在语义上是否正确，事实并非如此。如果“内容”部分实际上用于图像标题、图像描述等，则它们应该在同一部分内。 section 属性用于将主题相关的内容分组在一起。意思是“内容”部分应该在“幻灯片”部分内。像这样:
<section id="slide">
<div id="imgSlide">
...
</div>
<div id="content">
</div>
</section> <!-- Section slide ends -->
现在图像内容和图像都在同一个部分。语义上应该是正确的。查看此链接 http://oli.jp/2009/html5-structure1/
关于html - 当我使用 'transform' 时容器大小与内容不一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36434358/
27
4
0
我有一段这样的代码。我发现 myResults = writer.getBuffer().toString(); 对某些用例返回 EMPTY STRING，但对其他用例则不返回。 我查看了服务器，但在
如何使用 javascript 通过 id 更改元素中的 -webkit-transform 、-moz-transform 、-o-transform 和 -ms-transform css？ 这段
我正在使用 javax.xml.transform.Transformer.transform() 通过 xsl 样式表将一个 xml 转换为另一个 xml。我想以编程方式设置第一级 child 的排
为了使 seaborn.pairplot() 正常工作，在 jupyter notebook 中执行了以下步骤。 /usr/local/lib/python2.7/site-packages/matp
假设这个输入 XML 编写这些代码行: StreamSource source = new StreamSource(new StringReader(/* the above XML*/));
如何在 spring 框架中配置 java.xml.transform.Transformer ？我需要转换器的实例来通过 xslt 将 xml 转换为文本。因此，配置的转换器应该了解 xslt 样式
我一直在核心数据中使用可转换属性，将图像和颜色等复杂对象转换为原始数据。我拿了this ... The idea behind transformable attributes is that you
我正在尝试打开 XML 文件，添加一些更改，然后保存到其他 XML 文件结果。我正在使用标准 javax.xml.parsers.* 和 javax.xml.transform* 类。 但在保存的文档
Transformer(变换方法)对输入源的大小有限制吗？ 我正在尝试转换一个相当长的 (18M) XML，但收到一个奇怪的错误 "The element type "HR" must be term
我正在尝试解析一个非常简单的示例: 100 我使用的样式表如下: 这在 libxs
来自文档 for from_pretrained ，我知道我不必每次都下载预训练的向量，我可以使用以下语法保存它们并从磁盘加载: - a path to a `directory` contain
默认缓存目录磁盘容量不足，我需要更改默认缓存目录的配置。 最佳答案 您可以在每次加载模型时指定缓存目录 .from_pretrained通过设置参数cache_dir .您可以通过导出环境变量 TRA
有一个函数，例如: CATransform3DGetAffineTransform Returns the affine transform represented by 't'. If 't' ca
我有一个包含 WCF 设置的配置文件: “add”元素只有一个 baseAddress 属性，所以我不能使用 Match 定位器。一种方法如何像我的示例中那样转换多个元素？ 最
在收到下面链接中描述的错误后，我已将实体属性的 Transfomer 设置为 NSSecureUnarchiveFromData(之前为 nil)。 CoreData crash error Xcod
当我写Document时使用 Transformer 的 transform() 方法转换为 XML，生成的 XML 文档的格式很好 - 所有元素都写在单独的行上并缩进。除了第一个元素与定义写在同一行
我不明白 StreamResult 实例会发生什么。我看到 Transformer 对象接收 source 和 streamResult: transformer.transform(sour
从下面的代码片段我应该得出结论，std::transform 比 boost::transform 更受欢迎，因为前者使用更少的初始化和析构函数可能更有效比后者？ #include #include
transform() 可以将函数应用到序列的元素上，并将这个函数返回的值保存到另一个序列中，它返回的迭代器指向输出序列所保存的最后一个元素的下一个位置。 这个算法有一个版本和 for_each()
我是 react-native 的新手。在项目上将 react-native 从 0.48.3 升级到 0.62.2 后，运行“react-native run-ios”命令时出现错误:“index.
我是一名优秀的程序员,十分优秀！