我一直在研究一些部分内容。我有两列50%宽度,一列有图像,另一列有四盒联系地址。我所做的是将图像放置在特定的高度,但这似乎与媒体查询无关。所以我已经完成了一些先前提出的问题,并发现其中一个为我工作。一切都很好,直到我得到响应部分。图像要么太大(不对齐邻居col),要么变小。我每次更改响应选项卡时都需要指定填充。我需要Image动态设置它的高度。
我知道它的东西很小但我无法弄清楚。
以下是我正在尝试的代码Fiddle。
.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%;
}
}

<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;
帮帮我。在此先感谢。
答案 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屏幕查询以根据不同的屏幕尺寸排列图像。
简单有效。