在列內響應式4：3圖像作物

我使用Flexbox創建了三列布局，每列寬度爲31.3％。然後，每列包含一個佔據其列寬度100％的圖像。由於沒有固定的寬度，我很難以4：3的寬高比裁剪和調整圖像大小。在列內響應式4：3圖像作物

這是我的結構：

<div id="events-cont"> 
    <div class="events-row"> 
    <div class="event-card"> 
     <div class="event-card-img"> 
     <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=600&h=300" /></a> 
     </div> 
     <div class="event-card-info"> 
     <h1>Event title</h1> 
     <h2>Event date</h2> 
     <h2>Event venue</h2> 
     <p> 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
      <a href="#">Learn More <span class="chevron right"></span></a> 
     </p> 
     <div class="button-cont"> 
      <a class="button blue-button" href="#">Buy Tickets</a> 
     </div> 
     </div> 
    </div> 
    <div class="event-card"> 
     <div class="event-card-img"> 
     <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=600&h=300" /></a> 
     <div class="series-caption">Series title</div> 
     </div> 
     <div class="event-card-info"> 
     <h1>Event title</h1> 
     <h2>Event date</h2> 
     <h2>Event venue</h2> 
     <p> 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
      <a href="#">Learn More <span class="chevron right"></span></a> 
     </p> 
     </div> 
    </div> 
    <div class="event-card"> 
     <div class="event-card-img"> 
     <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=600&h=300" /></a> 
     <div class="series-caption">Series title</div> 
     </div> 
     <div class="event-card-info"> 
     <h1>Event title</h1> 
     <h2>Event date</h2> 
     <h2>Event venue</h2> 
     <p> 
      Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu. 
      <a href="#">Learn More <span class="chevron right"></span></a> 
     </p> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

.events-row { 
    display: flex; 
    justify-content: space-around; 
    padding-bottom: 30px; 
} 

.events-row .event-card { 
    background-color: #666; 
    flex-basis: 31.3%; 
} 

.events-row .event-card .event-card-img { 
    position: relative; 
    height: 295px; 
} 

.events-row .event-card .event-card-img:hover { 
    opacity: 0.5; 
} 

.events-row .event-card .event-card-img img { 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

.events-row .event-card .event-card-img .series-caption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 5px 10px; 
    font-size: 1.5em; 
    color: white; 
    background-color: black; 
} 

.events-row .event-card .event-card-info { 
    padding: 15px; 
    text-align: left; 
    color: #333; 
} 

.events-row .event-card .event-card-info h1 { 
    font-size: 2.5em; 
    color: black; 
} 

.events-row .event-card .event-card-info h2 { 
    line-height: 1.5; 
} 

.events-row .event-card .event-card-info p { 
    padding: 15px 0; 
    font-size: 1.75em; 
} 

.events-row .event-card .event-card-info p a { 
    font-size: 1.1em; 
} 

.events-row .event-card .event-card-info .button-cont { 
    text-align: center; 
} 

.events-row .event-card .event-card-info .button-cont .button { 
    display: inline-block; 
    margin: 30px; 
    padding: 10px 30px; 
    font-size: 1.8em; 
}

筆：http://codepen.io/ourcore/pen/NbOwaV。

來源

2016-12-13 Mario Parra

張貼您的問題的CSS以及 – j08691

@ j08691剛剛添加！ –

你弄清楚了，還是你還想幫忙？將圖像保持在4：3的比例，您是否計劃將其縮小和增長以適應它們所在的列？圖像部分有'height：295px'。當寬度小於容器的高度時，您希望圖像看起來如何？ –

這裏是一個jQuery溶液：http://codepen.io/blainerw/pen/XNxEpd

的標記（HTML）是相同的。

這個CSS有點不同。我從.events-row .event-card .event-card-img和.events-row .event-card .event-card-img img中刪除了高度。

.events-row { 
    display: flex; 
    justify-content: space-around; 
    padding-bottom: 30px; 
} 

.events-row .event-card { 
    background-color: #666; 
    flex-basis: 31.3%; 
} 

.events-row .event-card .event-card-img { 
    position: relative; 
} 

.events-row .event-card .event-card-img:hover { 
    opacity: 0.5; 
} 

.events-row .event-card .event-card-img img { 
    display: block; 
    width: 100%; 
    object-fit: cover; 
} 

.events-row .event-card .event-card-img .series-caption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 5px 10px; 
    font-size: 1.5em; 
    color: white; 
    background-color: black; 
} 

.events-row .event-card .event-card-info { 
    padding: 15px; 
    text-align: left; 
    color: #333; 
} 

.events-row .event-card .event-card-info h1 { 
    font-size: 2.5em; 
    color: black; 
} 

.events-row .event-card .event-card-info h2 { 
    line-height: 1.5; 
} 

.events-row .event-card .event-card-info p { 
    padding: 15px 0; 
    font-size: 1.75em; 
} 

.events-row .event-card .event-card-info p a { 
    font-size: 1.1em; 
} 

.events-row .event-card .event-card-info .button-cont { 
    text-align: center; 
} 

.events-row .event-card .event-card-info .button-cont .button { 
    display: inline-block; 
    margin: 30px; 
    padding: 10px 30px; 
    font-size: 1.8em; 
}

然後使用jQuery函數檢查列的寬度並將適當的高度添加到圖像。

function calcHeight() { 

    var heightCalc = $('.event-card').width() * 0.75; 

    $('.events-row .event-card .event-card-img img').height(heightCalc); 

} 

$(document).ready(function(){ 

    calcHeight(); 

}); 

$(window).resize(function() { 

    calcHeight(); 

});

來源

2016-12-14 01:30:50 KillahB

我有一種感覺，我可能需要使用jQuery。感謝你！ –

在列內響應式4：3圖像作物

回答

相關問題