Question

我正在尝试使整个英雄区域（包括第二列中的“ Mizna促进当代...”及其下方的Featured Event图像）中的两个区域都没有图像的拉伸。我知道如何在没有第二（右）列的情况下使滑块具有响应性，但是我也需要第二列也具有响应性，并且高度与左列的滑块相等，这被证明是一个挑战。所有图像都必须按比例调整大小，并且不能拉伸或变形。

主页位于：http://staging.mizna.org/

我尝试将所有高度设置为auto，并使用JS来均衡左右列的高度，但这似乎没有用。

HTML：

<div class="hero_slider">
<div class="hero_slider-left">
<ul class="bxslider">
<li><a href="/mizna-news/call-for-art-let-there-be-spaces-in-your-togetherness/"><img src="http://staging.mizna.org/wp-content/uploads/2019/06/Let-There-Be.jpg"></a>
<div class="hero_bann_cont">
<div class="ban_hero_full"><h5>Latest News</h5></div>
<div class="ban_hero_full"><h1>Call for Art</h1></div>
<div class="ban_hero_full"><p>Let There Be Spaces in Our Togetherness</p>
</div>
</div>
</li>
<li><a href="/mizna-news/call-for-submissions-2019-arab-film-fest/"><img src="http://staging.mizna.org/wp-content/uploads/2019/05/Mizna-Call-For-Submissions-2019-Twin-Cities-Arab-Film-Fest.jpg"></a>
<div class="hero_bann_cont">
<div class="ban_hero_full"><h5>Latest News</h5></div>
<div class="ban_hero_full"><h1>Call for Submissions</h1></div>
<div class="ban_hero_full"><p>2019 Arab Film Fest</p>
</div>
</div>
</li>
<li><a href="/mizna-news/its-no-secret-why-the-kids-on-gazas-beach-love-to-sail/"><img src="http://staging.mizna.org/wp-content/uploads/2019/06/Its-no-secret.jpg"></a>
<div class="hero_bann_cont">
<div class="ban_hero_full"><h5>Latest News</h5></div>
<div class="ban_hero_full"><h1>It’s No Secret Why The Kids on Gaza’s Beach Love To Sail</h1></div>
<div class="ban_hero_full"></div>
</div>
</li>
</ul>
</div>
<div class="hero_slider-right">
<div class="hero_slider-right_content ">
<p style="color: white !important;">Mizna promotes contemporary expressions of Arab American arts and culture. <a class="link_underline" href="http://staging.mizna.org/support-us/">Support Us</a></p></div>
<a href="http://staging.mizna.org/event/chroma-zone-mural-art-festival/">
<div class="hero_slider-right-bottom" style="background-image:url('http://staging.mizna.org/wp-content/uploads/2019/06/ChromaZone_Fadlabi_headshot02-32-e1561665398607.jpg');"><div class="hero_slider-right-bottom_cont">
<h4>Featured Event</h4>
<h3><strong>Chroma Zone Mural and Arts Fest</strong></h3>
</div>
</div>
</a>
</div>
</div>

CSS：

.hero_slider {
 float: left;
 width:100%;
 position:relative;
 }

 .hero_slider-left ul{margin:0px;}
 .hero_slider-left .bx-viewport {
  height: 771px !important;
 }

 .hero_slider-left .bx-wrapper img {
  height: 771px;
  max-width: 100%;
  width: 100%;
  display: inline;
  }

 .hero_slider-left .bx-wrapper .bx-next {
  background: url(../images/rightarrow.png) 0px 0px no-repeat;
  right: 50px;
  }

 .hero_slider-right_content{
  vertical-align: middle;
  display: table-cell;
  width: 100%;
  height: 250px;
  }

 .hero_slider-right-bottom {
  float: right;
  width: 100%;
  background-position: center;
  background-size: cover;
  height: 521px;
  color: #fff;
  position: relative;
  }

 .hero_slider-right-bottom_cont h4{margin-bottom:0px;}
 .hero_slider-right-bottom_cont h3{margin-top:0px;line-height: 
  27px;margin-bottom: 20px;}
 .hero_slider-right-bottom_cont {
  position: absolute;
  bottom: 0;
  padding: 0px 30px;
  width:100%;
  }

 .hero_bann_cont h1{
  color:#fff;
  font-family: GraphikArabicSemiBold;
  line-height: 70px;
  padding-right: 15px;
  font-size: 50px;
  }

 .ban_hero_full h1, .ban_hero_full p, .ban_hero_full h5{max- 
  width:75%;background: rgba(0,0,0,0.8);padding: 1%;margin- 
  bottom:10px;float:left;}

 .hero_bann_cont h2{
  color:#fff;
  padding:0px 40px;
  padding-right:10em;
  }

 .ban_hero_full{width:100%;float:left;display:none;}
 .hero_slider-right_content p{
  color:#000000;
  padding: 10px 31px;
  font-size: 25px;
  font-family: GraphikArabicSemiBold;
  line-height:normal;
  margin:0px;
  }

 .hero_slider-right_content strong{
  color:#fff;
  }

 .hero_slider-left_content h1 {
  color:#fff;
  font-size: 53px;
  padding: 0em 6em;
  margin: 0px;
  }

 .hero_bann_cont p {
  color:#fff;
  font-size: 24px;
  font-family: GraphikArabicSemiBold;
  /* padding-top: 20px; */
  margin-bottom:0px;
  }

 .hero_bann_cont a{color:#fff;}
 .gallery_main {
  float: left;
  width:100%;
  padding: 0px 0px;
  }

 .hero_slider-right{
  float: right;
  width:35%;
  background-color: #ff4d4d;
  }

.header_bar_main {background: #ff4d4d;float: left;width: 100%;  height: 
 100%;position: relative;display: flex;align-items: center;}
.header_bar_left {width: 75%;float: left;position: relative;}
.header_bar_right {float: left;color:#fff;padding-left: 60px;width: 24%;}
.header_bar_right ul{padding: 0px;margin: 0px;}
.header_bar_right a {display: block;color: #fff;font-family: 
 GraphikArabicSemiBold;font-size: 22px;padding: 5px 0px;text-decoration: 
 underline;line-height: normal;}
.header_bar_left img{width:100%;max-height:auto;height: auto;}
.header_bar_right_inn{display: table-cell;vertical-align: 
 middle;height:auto;padding: 10px 0;}
.header_bar_left >h1 {font-size: 24px;font-family: 
 GraphikArabicSemiBold;position: absolute;top: 25px;background: 
 #000;color: #fff;padding: 3px 30px;text-transform: uppercase;}

.hero_slider-right_content{
 vertical-align: middle;
 display: table-cell;
 width: 100%;
 height: 250px;
 }

感谢您的帮助。谢谢！

如何使本设计中的英雄区域具有响应性？

0 个答案: