1
일부 부분을 작업했습니다. 나는 이미지가있는 50 % 너비와 연락처 주소가있는 네 개의 상자가있는 두 개의 열이 있습니다. 내가 한 것은 특정 높이의 이미지를 배치했지만 미디어 쿼리와 함께 제대로 작동하지 않는 것 같습니다. 그래서 이전에 묻는 몇 가지 질문을 통해 나를 위해 일하는 한 사람을 찾았습니다. 응답하는 섹션을 얻을 때까지 모든 것이 잘됩니다. 이미지가 너무 커 (이웃 열로 정렬되지 않음) 또는 작아지고 있습니다. 반응 형 탭을 변경할 때마다 패딩을 지정해야합니다. 동적으로 높이를 설정하려면 이미지가 필요합니다.이미지가 응답 성이 좋지 않습니다.
나는 그것의 작은 것을 알고 있지만 나는 그것을 이해할 수 없다.
여기에 제가 시도한 코드 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:[email protected]">[email protected]</a></p>
<p class="center-col text-medium"><a href="mailto:[email protected]">[email protected]</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>것은 저를 도와주세요. 미리 감사드립니다.
질문이 명확하지 않습니다. 구체적으로 말하자면, 일어나고 싶습니까? –
https://stackoverflow.com/questions/16563730/need-empty-div-with-background-image-to-force-height-and-must-be-responsive 이것은 내가 시도한 것입니다. 그러나 이것은 반응 적으로 작동하지 않습니다. –