카테고리 없음
이미지 태그가 항상 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%;
}