Question

我使用Flexbox创建了一个三列布局，每列的宽度为31.3％。然后，每列包含占据其列宽100％的图像。由于没有固定的宽度，我很难以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。

Answer 1

这是一个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();

});

列内响应4：3图像裁剪

1 个答案: