Установите высоту равной ширине минус некоторое значение

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> 

Мой вопрос: как сделать высоту = ширина - 40 пикселей для конкретного элемента чистым css?

Спасибо.

Answer 1

У CSS есть экспериментальный способ делать вычисления с чистым css.

Вы можете сделать:

width: calc(100% - 80px); 

Если вы wan't известково высоту вы можете сделать это:

--widthA: calc(100% -80px); 
width: --widthA; 
height: calc(--widthA - 200px); 

Edit !: Я добавил высоту известково на основе ширины ,

Если вы wan't, чтобы узнать больше об этом, я предлагаю: Mozilla Docs

Answer 2

Если вам нужно 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%; 
}