html - .container > .wrapper > img:最大化 img,但不大于 .container(祖父母) - 如何?
问题描述
我有.container > .wrapper > img
。这是一个任务:
img
必须具有可能的最大宽度/高度,保持其纵横比,100% 可见且不超过.container
's 大小。- 图像不得超过其自然尺寸。
- 图像的宽度/高度未知。
.container
已知具有固定(以像素为单位)的宽度/高度,但不知道确切的尺寸。.wrapper
必须紧密贴合img
(必须与图像具有相同的宽度和高度)。Wrapper 是一种特殊元素,用于将内容放在图像上,例如徽章。我在代码片段中添加了示例标签来演示这一点。这应该是可能的。
标记:
<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
但它不起作用 ,因为(图像父级)高度不.wrapper
固定,也无法固定 - 见第 5 点。
我还能做些什么来使用纯 CSS 完成所描述的任务?我更喜欢在 IE11 中工作的解决方案,但其他人也会受到赞赏。
编辑:容器和图像可以是任何大小,这一点非常重要。我在片段中添加了设置以进行不同尺寸的测试。
如果图像大于容器,它应该渲染不大于容器。
如果图像小于容器,则其渲染不应大于其自然大小。
它应该与水平容器/垂直图像和垂直容器/水平图像一起使用。
编辑2:这不仅仅是一个“讨厌的干扰”元素也很重要.wrapper
。它是功能性的:包装器用于在其中的图像上放置绝对定位的内容(例如标签,徽章),它必须支持转换(镜像,翻译),css过滤器等,一般来说 - 我们通常使用块元素做的所有事情.
操场:
$(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>
推荐阅读
- grails - 如何在循环中使用生成的 grails 3 服务在数据库中存储多个条目
- java - 如何从 @PreMatching 过滤器中的 ContainerRequestContext 更改路径参数?
- load-testing - 哪些负载测试工具可以使用来自 S3 的 AWS ALB 日志
- java - Spring webflux:如何在ResponseEntityResultHandler中使用自定义jackson ObjectWriter?
- javascript - 使用 PDF.js 查看器显示受保护资源提供的 pdf
- php - 附加区域的自动年龄计算
- php - 登录页面或同一 URL 上的“主页”页面(Laravel 5.6)
- c# - Xamarin.Forms Android 应用 SQLite 数据消失
- r - 迭代 4 个因素的组合的 3 向交互 ggplot 调用
- javascript - 如何从 javascript 字符串中去除值