이미지가 div보다 클 때 CSS를 사용하여 이미지를 중앙에 배치하는 방법(코드 예)

이 기사에서는 CSS를 사용하여 이미지가 div보다 큰 경우(코드 예제) 중앙에 표시되는 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 너.

이미지가 p보다 큰 경우 이미지가 중앙에 표시되도록 하려고 합니다. 이미지의 크기를 축소하면 이미지의 너비와 높이를 직접 설정하지 않으면 이미지가 p 전체를 채우지 못할 수 있습니다. , 외부 p를 Overflow:hidden으로 설정합니다. 외부 p가 수평 및 수직 중앙에 있도록 설정되어 있고 그림이 중앙에 있지 않은 경우에도 마찬가지입니다.

해결책:

1- 그림을 배경 그림으로 설정

<div class="face-img-contain" id="face-img-back">
 </div>

.face-img-contain{
    width:348px;
    height:436px;
    margin:0 auto;
    margin-top: 14px;
    position: relative;
    background-image: url(../images/face-img/test-22.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid gainsboro;
}

若是后台返回的地址，别忘了拼接方法正确
$("#face-img-back").css("background-image","url("+faceImg+")");

2 - p의 100%를 기준으로 그림의 너비와 높이를 설정한 다음 object-fit:cover;

<div class="face-img-contain-new-new">
    <img class="face-img-defined1 lazy"  src="/static/imghwm/default1.png"  data-src="../images/face-img/test-22.png"   alt=""  id="face-img-photo">
</div>

.face-img-contain-new-new{
    width:348px;
    height:436px;
    margin:0 auto;
    margin-top: 14px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid gainsboro;
}
.face-img-defined1{
    width:100%;
    height:100%;
    object-fit:cover;
}

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되기를 바랍니다. 학습. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼을 방문하세요!

관련 권장 사항:

CSS 온라인 설명서

div/css 그래픽 튜토리얼

위 내용은 이미지가 div보다 클 때 CSS를 사용하여 이미지를 중앙에 배치하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!