图像响应不是很快

时间：2017-11-21 12:19:03

标签： html css responsive-design

我一直在研究一些部分内容。我有两列50％宽度，一列有图像，另一列有四盒联系地址。我所做的是将图像放置在特定的高度，但这似乎与媒体查询无关。所以我已经完成了一些先前提出的问题，并发现其中一个为我工作。一切都很好，直到我得到响应部分。图像要么太大（不对齐邻居col），要么变小。我每次更改响应选项卡时都需要指定填充。我需要Image动态设置它的高度。

我知道它的东西很小但我无法弄清楚。

以下是我正在尝试的代码Fiddle。

＆＃13;
＆＃13; 
.our-specials {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.our-specials .column-6 {
  width: 50%;
  float: left;
  display: table;
  flex-wrap: wrap;
  justify-content: center;
  color: #fff;
}

.col-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.our-image {
  background: url("https://preview.ibb.co/fGwp8R/nintendo_switch_with_red_and_blue_neon_joy_con_controllers.jpg");
  background-repeat: no-repeat;
  padding-top: 61.766%;
  background-size: cover;
}

.contact-details {
  text-align: center;
}

.contact-inner {
  height: 318px;
  width: 50%;
  padding: 0 60px;
  display: table-cell;
  vertical-align: middle;
}

.contact-inner i {
  font-size: 35px;
  margin-bottom: 10px;
  color: #c8001a;
}

.contact-inner p {
  font-size: 14px;
  color: #6f6f6f;
}

.bg-black {
  background-color: #000000;
}

.bg-extra-dark-grey {
  background-color: #1c1c1c
}

@media only screen and (max-width: 1024px) {
  .our-image {
    padding-top: 88.166%;
  }
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="section-row our-specials clearfix" style="padding-bottom: 0;">
  <div class="col-6">
    <div class="our-image"></div>
  </div>
  <div class="col-6">
    <div class="contact-details">
      <!-- start contact item -->
      <div class="column-6 bg-extra-dark-grey">
        <div class="contact-inner">
          <i class="fa fa-map-o"></i>
          <div class="contact-title">Contact Address</div>
          <p class="width-60 md-width-80 center-col text-medium">301 The Greenhouse, Custard Factory, London, E2 8DY.</p>
        </div>
      </div>

      <div class="column-6 bg-black">
        <div class="contact-inner">
          <i class="fa fa-comments-o"></i>
          <div class="contact-title">Let's Talk</div>
          <p class="center-col text-medium no-margin">Phone: 1-800-222-000</p>
          <p class="center-col text-medium">Fax: 1-800-222-002</p>
        </div>
      </div>

      <div class="column-6 bg-black">
        <div class="contact-inner">
          <i class="fa fa-envelope-o"></i>
          <div class="contact-title">Email Us</div>
          <p class="center-col text-medium no-margin"><a href="mailto:info@domain.com">info@domain.com</a></p>
          <p class="center-col text-medium"><a href="mailto:hire@domain.com">hire@domain.com</a></p>
        </div>
      </div>

      <div class="column-6 bg-extra-dark-grey">
        <div class="contact-inner">
          <i class="fa fa-clock-o"></i>
          <div class="contact-title">Working Hours</div>
          <p class="center-col text-medium no-margin">Mon to Sat - 9 AM to 11 PM</p>
          <p class="center-col text-medium">Sunday - 10 AM to 6 PM</p>
        </div>
      </div>

    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

帮帮我。在此先感谢。

3 个答案:

答案 0 :(得分：1)

假设我已经理解正确，问题是图像的一部分被响应视图上的块阻挡了？如果是这种情况，将.our-image div设置为background-size: contain就可以了。 

.our-specials {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.our-specials .column-6 {
  width: 50%;
  float: left;
  display: table;
  flex-wrap: wrap;
  justify-content: center;
  color: #fff;
}

.col-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.our-image {
  background: url("https://preview.ibb.co/fGwp8R/nintendo_switch_with_red_and_blue_neon_joy_con_controllers.jpg");
  background-repeat: no-repeat;
  padding-top: 61.766%;
  background-size: cover;
}

.contact-details {
  text-align: center;
}

.contact-inner {
  height: 318px;
  width: 50%;
  padding: 0 60px;
  display: table-cell;
  vertical-align: middle;
}

.contact-inner i {
  font-size: 35px;
  margin-bottom: 10px;
  color: #c8001a;
}

.contact-inner p {
  font-size: 14px;
  color: #6f6f6f;
}

.bg-black {
  background-color: #000000;
}

.bg-extra-dark-grey {
  background-color: #1c1c1c
}

.our-image {
background-size: contain;
}

@media only screen and (max-width: 1024px) {
  .our-image {
    padding-top: 88.166%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="section-row our-specials clearfix" style="padding-bottom: 0;">
  <div class="col-6">
    <div class="our-image"></div>
  </div>
  <div class="col-6">
    <div class="contact-details">
      <!-- start contact item -->
      <div class="column-6 bg-extra-dark-grey">
        <div class="contact-inner">
          <i class="fa fa-map-o"></i>
          <div class="contact-title">Contact Address</div>
          <p class="width-60 md-width-80 center-col text-medium">301 The Greenhouse, Custard Factory, London, E2 8DY.</p>
        </div>
      </div>

      <div class="column-6 bg-black">
        <div class="contact-inner">
          <i class="fa fa-comments-o"></i>
          <div class="contact-title">Let's Talk</div>
          <p class="center-col text-medium no-margin">Phone: 1-800-222-000</p>
          <p class="center-col text-medium">Fax: 1-800-222-002</p>
        </div>
      </div>

      <div class="column-6 bg-black">
        <div class="contact-inner">
          <i class="fa fa-envelope-o"></i>
          <div class="contact-title">Email Us</div>
          <p class="center-col text-medium no-margin"><a href="mailto:info@domain.com">info@domain.com</a></p>
          <p class="center-col text-medium"><a href="mailto:hire@domain.com">hire@domain.com</a></p>
        </div>
      </div>

      <div class="column-6 bg-extra-dark-grey">
        <div class="contact-inner">
          <i class="fa fa-clock-o"></i>
          <div class="contact-title">Working Hours</div>
          <p class="center-col text-medium no-margin">Mon to Sat - 9 AM to 11 PM</p>
          <p class="center-col text-medium">Sunday - 10 AM to 6 PM</p>
        </div>
      </div>

    </div>
  </div>
</div>

答案 1 :(得分：0)

你想要使用background-size：contains;在.our-image上保持宽高比。

答案 2 :(得分：0)

你使用了一个名为our-image的类。您将图像排列为背景图像并将其大小设置为覆盖。 这似乎不对。封面将始终保持大小以填补你的div。

1st：使用image作为html元素。它总是更好和推荐。 第二：删除背景网址作为图像。 第三：响应性取决于屏幕宽度。所以使用宽度宽度：100％或任何你想要的尺寸。 第四步：定义@media屏幕查询以根据不同的屏幕尺寸排列图像。

简单有效。

相关问题
最新问题