- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有 .container > .wrapper > img
。这是一个任务:
img
必须具有可能的最大宽度/高度,保持纵横比,100% 可见且不超过 .container
的大小。.container
已知具有固定的(以像素为单位)宽度/高度,但确切尺寸未知。 .wrapper
必须紧密贴合 img
(必须与图像具有相同的宽度和高度)。 Wrapper 是一种特殊元素,用于将内容放在图像上,例如。 G。徽章。我在代码片段中添加了示例标签来演示这一点。这在某种程度上应该是可能的。标记:
<div class="container">
<div class="wrapper">
<div class="label">new!</div>
<img src="https://via.placeholder.com/150x300">
</div>
</div>
我想我可以使用 display: block; max-height: 100%
对于 img
,但它 does not 工作,因为 .wrapper
(图像父级)高度不固定,它不能'不固定 - 参见第 5 点。
我还可以做些什么来使用纯 CSS 完成所描述的任务?我更喜欢在 IE11 中工作的解决方案,但其他人也会受到赞赏。
编辑:容器和图像可以是任意大小非常重要。我在代码段中添加了设置以测试不同尺寸。
如果图像大于容器,则渲染时不应大于容器。
如果图像小于容器,则渲染时不应大于其自然大小。
它应该适用于水平容器/垂直图像和垂直容器/水平图像。
编辑 2:.wrapper
不只是一个“讨厌的干扰”元素,这也非常重要。它是功能性的:wrapper 用于在其中的图像上放置绝对定位的内容(例如标签、徽章),它必须支持转换(镜像、翻译)、css 过滤器等,一般来说——我们通常用 block 元素做的所有事情.
Playground :
$(function() {
$('input[name=container-width]').on('change', function() {
$('.container').css('width', $(this).val() + 'px')
})
$('input[name=container-height]').on('change', function() {
$('.container').css('height', $(this).val() + 'px')
})
$('input[name=image-width]').on('change', function() {
var width = $(this).val()
var height = $('input[name=image-height]').val()
$('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
})
$('input[name=image-height]').on('change', function() {
var height = $(this).val()
var width = $('input[name=image-width]').val()
$('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
})
})
.container {
width: 200px; /* can have any value in pixels */
height: 200px; /* can have any value in pixels */
background-color: green;
}
.wrapper {
outline: 1px solid yellow;
position: relative; /* for label */
}
.label {
position: absolute;
background-color: blue;
color: white;
}
.label.-top-left {
top: 10px;
left: 10px;
}
.label.-bottom-right {
bottom: 10px;
right: 10px;
}
<h2>Settings</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Container: width <input type="number" step="10" name="container-width" value="200"> height <input type="number" step="10" name="container-height" value="200">
<br>
Image: width <input type="number" step="10" name="image-width" value="150"> height <input type="number" step="10" name="image-height" value="300">
<br>
<br>
<h2>Demo</h2>
<div class="container">
<div class="wrapper">
<div class="label -top-left">new!</div>
<div class="label -bottom-right">good!</div>
<img src="http://via.placeholder.com/150x300">
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>How it should look like</h2>
<p>This is not the solution, because is has many hardcoded dimensions. It's just a visual demo of what I want to achieve.</p>
<div style="width: 200px; height: 200px;background-color: green">
<div style="width: 100px; height: 200px; position: relative;outline: 1px solid yellow">
<div style="position: absolute;
top: 10px;
left: 10px;
background-color: blue;
color: white;">new!</div>
<div style="position: absolute;
bottom: 10px;
right: 10px;
background-color: blue;
color: white;">good!</div>
<img style="max-width: 100%; max-height: 100%;" src="http://via.placeholder.com/150x300">
</div>
</div>
最佳答案
这对你有用吗?
.container {
width: 200px;
/* can have any value in pixels */
height: 200px;
/* can have any value in pixels */
background-color: green;
}
.container-2 {
width: 300px;
height: 300px;
}
.wrapper {
outline: 1px solid yellow;
display: inline;
height: inherit;
}
img {
width: auto;
max-height: 100%;
display: inline-block;
vertical-align: bottom;
}
<div class="container">
<div class="wrapper">
<img src="http://via.placeholder.com/150x300">
</div>
</div>
<br>
<div class="container container-2">
<div class="wrapper">
<img src="http://via.placeholder.com/30">
</div>
</div>
关于html - .container > .wrapper > img : maximize img, 但不大于 .container(祖 parent ) - 怎么样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50286432/
我假设 jls 中描述的转换是根据优先级排序的。首先具有更高的优先级。 jls 因此我解决了 Boxing 比 Unboxing 具有更高的优先级。我决定检验这个假设。 研究以下代码: public
谁能解释一下我的 html 设计出了什么问题 Profile 问题是 div 标签(#profile wrapper)正在增加它的 margin top,如果我增加 #intro w
下面的完整代码示例(已成功编译)是我的问题的简化且稍微做作的示例。 NatPair 是一对 Nat ,我想使用函数 Num 将二进制 NatPair 操作逐点“提升”到 lift_binary_op_
给定以下函数: public void convertToWrapper(long[] longsToConvert) { } 和 public void convertToPrimitiv
我有这样的代码: class Base { } class Derived : Base { } class Wrapper { public T Value { get; } pub
我正在安装 SonarQube v5.0。 我正在运行 Windows Server 2012 64 位(虚拟操作系统)、Java 1.8 64 位和 SonarQube windows-x86-64
我正在为我的一个组件编写测试用例,该组件具有路由器(使用 withrouter)。我收到错误 wrapper.find is not a function。基本要求是需要检查我的渲染中是否存在标签,还
如何制作 在不改变结构的情况下,内部包装器比包装器本身更大? HTML CSS .page { width: 100%; height: 400px; bor
为了引导 Gradle-Wrapper,我需要从需要 HTTP Basic-Auth 的 Artifactory 中提取 Gradle 发行版。我的构建环境无法访问外部世界 - 这被公司代理阻止。我的
我正在构建一个Spring-Boot应用程序(2.1.4.RELEASE),并且正在使用它创建一个Gradle Wrapper gradle clean wrapper 我的gradle版本是5.4
以下代码取自这篇文章:How to create Scala swing wrapper classes with SuperMixin? import scala.swing._ import ja
我想同时使用 Boost.Asio 的 strand 和 prioritized wrapper。 在我编写代码之前,我阅读了以下信息: Boost asio priority and strand
Android Studio 的 Gradle 选项到底有什么区别: Android Studio->Preferences->Gradle 使用默认的gradle wrapper(推荐)和使用可定制
目前我有一个设置宽度为 1240 像素的包装器。可以想象,这意味着我页面中心的 1240 像素始终被包装器覆盖。 我还有一张宽度为 3160 像素的图像(1920 像素的图像大小,在中间切割并由 12
这只是一个练习,但我无法弄清楚其中的歧义: private static void flipFlop(String str, int i, Integer iRef) { System.out.pri
所以我现在正在编写我的网站,我正在使用两个 div 在背景中创建某种渐变,其中 div#bg1 为灰色,div#bg2 为深灰色。但是当我添加包装器 div 时,bg1 和 bg2 仍然遵循包装器的顶
已解决:必须 float #main div,并对结构进行许多其他重大更改。但致命一击是 float 的。 可以在 http://thepremium.ca/amodestblog 查看有问题的网站
操作系统:Windows 8.1 Visual Studio 高级版 2013 我有一个复杂的 MVC 应用程序,我已经运行了多年。我能够毫无问题地在调试中运行应用程序。然而,就在今天下午,当我尝试发
在带有 python 3.6.8 的 Ubuntu 18.04 上,尝试安装 Airflow。当我运行airflow initdb命令时,抛出以下错误 Traceback (most recent c
我将我的 Android Studio 升级到 2.3 版,然后开始出现此错误: Error:org.gradle.wrapper.WrapperExecutor.forProjectDirector
我是一名优秀的程序员,十分优秀!