css img 질문 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

css img 질문

undefined주차

연*아

・

추천

・

조회수

답변 완료

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>아이유 팬명록</title>
    <style>
        .mytitle {
            width: 100%;
            height: 600px;
            color: whitesmoke;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));

            background-size: cover;
            background-position: center;


            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mytitle > img {
            width: 100%;
        }

    </style>
</head>

<body>
<!--헤더 시작-->
<div class="mytitle">
    <img src="https://img.hankyung.com/photo/201911/01.20921840.1.jpg") alt="아이유메인사진">
    <h1>아이유 팬명록</h1>
    <p>현재 기온 : <span id="temp">00.0</span></p>
</div>
<!--헤더 끝-->
</body>

</html>

이미지를 넣고 높이를 지정하면 이미지 자체가 높이가 변경되어 사진이 잘리는데

이미지는 그대로 두고 높이 지정 해서 지정한 높이 만큼 이미지 비율 맞게 보이게 하고 싶어요.

이게 높이를 지정해서 전체 나온 모습

하지만 제가 원하는 높이를 지정했더니 이미지가 잘리는 현상..

원하는 높이를 지정하고 그 높이에 맞게 이미지 비율은 그대로 하고 하고 싶습니다!

댓글 알림