jquery - 根据子图片高度改变父div高度,不超过父div max-width

标签 jquery html css

我还没有找到任何好的 CSS 代码来解决我的问题,并且适用于所有主流浏览器。 也就是说,每当我在父 div 中使用 max-height: 90% 并在子 img 中设置 max-height: 100% 时,safari 会自动执行此操作。然而,Mozilla 没有。

是否有任何跨浏览器解决方案来确保 img 不会扩展超过父 div 的高度。但是父div可以调整到 child 的高度,并限制在自己的max-height

我也接受 jQuery,但在答案中更喜欢 CSS。

当谈到宽度时,在父 div 中始终为 width: 60%,在子 img 中为 max-width: 100%

代码

.fullScaleContent{
    position: fixed;
    width: 60%;
    max-height: 90%;
    height: auto;
    margin: 2% auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    -webkit-transform: translate(-50%, -55%); 
    -ms-transform: translate (-50%, -55%);
}
.fullScaleContent img{
    width:auto;
    height:auto;
    max-width: 100%;
    max-height: 100%;
}

图片示例:第一张图片是 safari 中的高度限制,第二张是 Firefox 中的。我需要两者都类似于 safari。 PS:黑色边框是div的实际边框

limited height - safari

limited height - firefox

宽度有限 - 两者都可以正常工作 - 高度根据 img 调整,最大宽度为 60%

limited width - both

最佳答案

二手 object-fit: contain

如果您使用 position,请在您的图像上使用它,以便它在流程中。

在整页中查看代码段并调整其大小。

片段

*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}
.fullScaleContent {
  position: fixed;
  width: 60%;
  max-height: 90%;
  height: auto;
  margin: 2% auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  -webkit-transform: translate(-50%, -55%);
  -ms-transform: translate (-50%, -55%);
}
.fullScaleContent img {
  position: relative;
  object-fit: contain;
  min-width: 128px;
  max-width: 100%;
  height: auto;
}
<figure class="fullScaleContent">
  <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">
</figure>

关于jquery - 根据子图片高度改变父div高度,不超过父div max-width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37515671/

相关文章:

javascript - 在 jQuery 效果运行时防止提交

javascript - 两个 UNIX 时间戳之间的差异(以天、小时、分钟和秒为单位)

jquery - 如果使用jquery在一个页面中存在多个表单,如何提交特定表单

php - 冲突的 'p' 样式

javascript - jQuery Featherlight 包含来自 api 的内容,第二次单击时加载

css - 如何创建带有对 Angular 线(或倾斜的)顶线的 div

html - 在 CSS 中将大写锁定更改为大写

html - 无法获取带边框的div

html - 将 div 居中对齐

javascript - 100% 高度减去 nPx 通过 css 或 jquery