[jquery] 부트 스트랩 이미지 및 div를 브라우저 너비로 확장하는 방법
.container다양한 뷰포트 크기에서 너비를 제한하고 싶지 않기 때문에 기본 헤더 이미지와 썸네일을 클래스 밖으로 이동하십시오 .container.
따라서 의사 코드는 다음과 같습니다.
<header>
<img>
<thumbnails>
</header>
<main>
<leftcolumn>
<img>
</leftcolumn>
<rightcolumn>
<text>
<text>
</rightcolumn>
</main>
썸네일을 본문의 이미지 및 내용과 일직선으로 유지하려면 본문 .col-md-**에서 사용한 클래스를 썸네일 주위에 복제해야합니다 .
콘텐츠를 겹치고 싶기 때문에 왼쪽 열에 음수 여백을 추가하여 헤더 콘텐츠 위로 끌어 올릴 것입니다.
아래는 제가 제안한 접근 방식을 보여주는 몇 가지 기본 마크 업입니다.
header .primary-img {
width: 100%;
}
.img-list {
background-color: #eee;
}
.img-list ul,
.img-list li {
margin: 0;
padding: 0;
list-style: none;
}
.img-list li {
display: inline-block;
margin: 1.5rem 0.5rem;
}
.content {
margin: 50px 0;
}
@media (min-width: 992px) {
.content .left {
margin-top: -225px;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="primary-header">
<img class="primary-img" src="http://placehold.it/1200x400">
<div class="img-list">
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-8">
<ul>
<li>
<img src="http://placehold.it/50x50&text=1">
</li>
<li>
<img src="http://placehold.it/50x50&text=2">
</li>
<li>
<img src="http://placehold.it/50x50&text=3">
</li>
<li>
<img src="http://placehold.it/50x50&text=4">
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main class="content">
<div class="container">
<div class="row">
<div class="left col-md-4">
<img class="img-responsive" src="http://placehold.it/300x400/ffcc00">
</div>
<div class="col-md-8">
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
<p>
Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
</p>
</div>
</div>
</div>
</main>참고 : 이미지를 겹치는 것이 운동이되지 않고 이동해야하는 작은 화면을 처리하는 방법을 고려했습니다.
편집하다
아래 댓글에 따라 아바타 이미지 이동에 대한 솔루션을 추가했습니다.
한 지역에서 다른 지역으로 아바타 이미지를 이동하기 만하면되는 경우 가장 간단한 방법은 두 번 필요한 마크 업에 아바타 이미지를 포함하는 것입니다. 그런 다음 미디어 쿼리를 사용하여 화면 크기에 적합한 아바타를 숨기거나 표시합니다.
스위치를 쉽게 식별 할 수 있도록 각 이미지를 다른 색상으로 만들었습니다.
코드 스 니펫 표시
정확히 무엇을 하려는지, 어떻게 수정해야하는지 정확히 알지 못하지만 CSS의 특성과 복제하려는 이미지의 경우 다음 속성을 사용해야한다고 생각합니다.
- 배경 이미지 (이미지를 img 태그가 아닌 배경으로 조작)
- 배경 위치 (이미지를 중앙에 배치)
- 배경 반복 ( '반복 없음'값을 사용하면 단일 이미지로 배경을 덮을 수 있음)
- 배경 크기 ( '표지'값은 요소의 모든 배경을 덮는 데 유용 할 수 있으므로 요소 너비의 100 %를 가질 수 있음)
이 튜토리얼 도 꽤 유용 할 것이라고 생각 합니다 .
추가 도움이 필요하면 알려주십시오.
-------------------움직임:-
<div class="profile-header-background">
<img src="http://placekitten.com/1000/400" alt="Profile Header Background">
</div>
<div class="clearfix profile-info-right-top">
<div class="col-md-12">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
<img src="http://placehold.it/30x30">
</div>
</div>
컨테이너 클래스 위에.
하지만 col-md-12의 내용을 수정해야합니다.
-------------------이미지 및 회색 div의 경우 컨테이너 주위에 래퍼를 사용해야합니다. 메인 컬럼 구조가 엉망이 될 것이기 때문에 container-fluid를 사용하지 마십시오. 컨테이너 주위에 다른 div를 추가하고이 div에 배경 이미지 / 색상을 지정하십시오.
배경 이미지의 경우 다음 코드를 사용하십시오.
<div class="profile-header-background">
</div>
<div class="grey-div">
<div class="container grey-container">
..place your grey content here..
</div>
</div>
<div class="container">
..place your content here..
</div>
다음 CSS 사용 :
.profile-header-background {
height: 400px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://placecage.com/1000/400');
width: 100%;
}
.grey-div {
background: grey;
}
사용 margin-top: -300px중이므로 컨테이너를 배경 이미지 외부와 뒤에 배치하기 만하면됩니다.
출처
https://stackoverflow.com/questions/39920114