카테고리 없음

이미지 태그가 항상 center를 보여주도록 하는방법

kimjiwon506 2023. 3. 24. 16:59

방법1.

<div class="c_img">
	<img src="../img/content/3040mini/section07.jpg" alt="" />
</div>

-css
.c_img {
	position: relative;
	left: 50%;
	max-width: 1920px;
	margin-left:-960px;
	line-height: 0;
	font-size: 0;
	text-align: left;
}
.c_img > img {
	position: relative;
	left: 50%;
	max-width: 1920px;
	margin-left: -960px;
}

방법2.

      <div className="img-size">                   <!-- 1번(red) == 화면크기 -->
        <div className="img-center">               <!-- 2번(blue) -->
            <img className="img"src="url"></img>   <!-- 3번(green) -->
        </div>
      </div>
      
      .img-size {
          overflow:hidden
          position: relative;
          width: 100%;
          height: 600px;
        }
        .img-center {
          text-align: center;
          position: absolute;
          top: 0;
          right: -200%;
          bottom: 0;
          left: -200%;
        }
        .img {
          max-width: 100%;
          max-height: 100%;
        }