존재하는 div보다 큰 이미지에 대한 코드가 있지만 이미지의 중간이 div에 표시되도록 중앙에 배치해야합니다. 바로 지금 이미지의 왼쪽에서 시작하여 잘립니다. 어떤 코드가 중앙에 있는지 잘 모르겠습니다.
편집 : SOLVED 내 솔루션은 귀하의 도움을 주셔서 감사합니다.
다음은 코드입니다.
.about {
display: inline-block;
position:relative;
width:100%;
overflow-x:hidden;
}
.about-img {
content:url("//placehold.it/1000x1000");
}<div class="about">
<img class="about-img"/>
</div>
<div><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>이미지의 높이가 고정되어 있으면 도움이 될 수 있습니다. about-image 클래스에서 높이를 100vh로 설정하여 이미지 높이를 전체 페이지 높이로 설정할 수 있습니다.
.about {
display: inline-block;
position:relative;
width:100%;
overflow-x:hidden;
}
.about-img {
background :url("//placehold.it/1000x1000") no-repeat center center;
background-size: cover;
width: 100%;
// height: 100px; //static height
// height: 100vh; // full page height
}<div class="about">
<img class="about-img"/>
</div>
<div><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다