Question

我有这样简单的代码：

CSS：

.timeline-header {
    max-width: 508px;
    max-height: 159px;
/*  width: 508px;
    height: 159px;*/
}

.timeline-header img {
    width: 100%;
    height: 100%;
}

HTML：

<div class="timeline-header">
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/6b/Big_Sur_June_2008.jpg">
</div>

是否有可能以某种方式设置图像尺寸的父母max-*尺寸？默认情况下，它按默认大小...

运行

Answer 1

css inherit就是你要找的东西。

.timeline-header, {
    max-width: 508px;
    max-height: 159px;
/*  width: 508px;
    height: 159px;*/
}
.timeline-header img{
    max-width: inherit;
    max-height: inherit;
    width: inherit;
    height: inherit;
}

和HTML

<div class="timeline-header">
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/6b/Big_Sur_June_2008.jpg">
</div>

JSFIDDLE

Answer 2

不确定

只需将max-尺寸设为inherit。

通过这样做，img将继承其父级的大小。

.timeline-header {
    max-width: 508px;
    max-height: 159px;
/*  width: 508px;
    height: 159px;*/
}

.timeline-header img {
    max-width: inherit;
    max-height: inherit;
}

Fiddle

是否可以通过父级max设置最大图像大小？

2 个答案: