css - 将高度设置为等于宽度减去某个值

Question

<div>
    <div class="row">
        <div class="col-md-4">
            <div class="cta-item cta-1">
                <a href="#">
                    <div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
                    <p class="cta-title">Visit</p>
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="cta-item cta-2">
                <a href="#">
                    <div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
                    <p class="cta-title">Shop</p>
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="cta-item cta-3">
                <a href="#">
                    <div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
                    <p class="cta-title">Eat</p>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(cta);
$(window).resize(cta);

function cta() {
    var ctaWidth = $('.cta-item').width();
    var newHeight = ctaWidth - 40;

    $('.cta-item').css( 'height', newHeight );
}
</script>

我的问题是如何通过纯 css 为特定元素做 height = width - 40px？

谢谢。

Answer 1

如果您也需要 CSS 在旧版浏览器中工作，则有一种方法可以利用这一事实，即垂直填充始终根据父元素的宽度进行计算。所以你可以这样做来强制高度:

// additional styles when Bootstrap css is loaded
.cta-item {
  position: relative;
  background-color: #ffcccc;
  *zoom: 1;
}

.cta-item::before {
  width: 0;
  float: left;
  display: block;
  content: ' ';
  padding-bottom: 100%; /* makes height match width */
  margin-top: -40px; /* value substracted from height */
}
// clearfix
.cta-item::after {
  content: ' ';
  display: table;
  clear: both;
}

工作示例:https://jsfiddle.net/7m5vyaqs/1/

它的工作原理类似于最小高度。如果你想要它是一个最大高度，你必须将 .cta-item 的内容包装到一个容器中并将其定位为绝对。喜欢:

.cta-item > *:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}