연말까지 매일 웹 사이트를 지속적으로 제작하는 대학생~ 25일째 이미지의 종횡비례를 최대한 유지하고 이미지에 텍스트(중앙설정)를 표시합니다~

입문

안녕하세요.요즘 주말에 온천 !
웹 사이트 제작에서 돈을 벌기 위해 연말까지 매일 웹 사이트를 만들고 있다.
오늘은 세로 비율을 유지하는 상황에서 가능한 한 상자 안에 그림을 표시하고 그림에 텍스트를 표시합니다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 25일째다.(2019/11/12)
잘 부탁드립니다.

사이트 URL

https://sin2cos21.github.io/day25.html

한 일

오늘 한 일은 크게 세 가지로 나뉜다.

이미지의 세로 비율을 유지한 상태에서 상자에 최대 표시(원래 치수를 초과하지 않음)

이미지 중앙 구성

텍스트를 이미지에 덮어쓰고 가운데에 배치합니다

일단 설치부터 볼게요!↓

따라서 설치 자체가 간단하고 주로 구조를 이해한다.오늘은 이전에 하고 싶었던 텍스트 on 이미지의 구조를 이해할 수 있어서 매우 기쁩니다.
그럼 1부터 순서대로 설명해.

1. 이미지의 종횡 비율을 유지한 상태에서 상자에 최대로 표시합니다(원래 치수를 초과하지 않음).

이것은 매우 간단하다.

    max-width:100%;
    max-height:100%;

이 두 줄만 더하면 그림은 상자 안에서 종횡비례를 유지하고 가장 크다.
max를 100%로 설정하면 이미지의 세로나 가로를 최대 상자의 크기로 조정할 수 있습니다.max는 100%이기 때문에 작은 부분은 얼마든지 종횡비례를 유지하여 사이즈를 재조정할 수 있지만 원래 사이즈 이상의 사이즈는 지원되지 않습니다.

2. 이미지 가운데 맞춤

다음.그림의 중앙 설정이지만 flex box를 사용하는 것이 가장 빠르다는 결론입니다.
하면, 만약, 만약...


<body>
    <div id="image_wrapper">
        <img class="background_image" src="day24_image/photo4.jpg" alt="テントの画像">
        <h2 class="text_on_image">テント泊</h2>
    </div>
</body>

id는 image-wrapper의 div입니다.

#image_wrapper {
    background-color: rgba(0, 0, 0, 1);
    width: 100vw;
    height: 100vh;
    /* 画像を真ん中に配置するためのflex */
    display: flex;
    justify-content: center;
    align-items: center;
}

디스플레이를 flex로 하면 해결됩니다.
flex라면img 아래의 h2도 반응한다고 생각할 수 있지만 뒤의 설명에서 h2는 이미지에 덮어쓰기 위해position을 absolute로 설정하기 때문에 전혀 문제가 없습니다.
따라서 하위 요소가 하나밖에 없다면position은 absolute도fixed도 아닌 요소를 중간에 설정하려면flexbox를 사용하는 것이 가장 쉽다.
반대로 중앙배치 요소를 원하는 상황에서 이 조건을 어떻게 적용할지 고려할 수 있을 것 같다.

3. 텍스트를 이미지에 덮고 가운데 맞춤

마지막으로 텍스트 on 이미지에 대해 설명합니다.
텍스트를 그림에 덮는 것 자체가 매우 간단하다.

    /* 要素同士を被せるためにはabsoluteかfixedを使わないといけない */
    position: absolute;
    top: 値;
    left: 値;

위치를 absolute로 설정하고 top과 left의 값을 그림에 설정하면 해결됩니다.
하지만 이곳에서는 어려운 일이 일어난다.예를 들어 그림이 중간에 있고 텍스트의position은 top, left든 50%든 중간에 있지 않습니다.
원소의 가장자리 부분이 50% 에 놓여 있기 때문이다.(안타깝게도 요소의 중앙부분은 50% 지점이 아니다...)
이 문제를 해결하기 위해transform 속성을 사용합니다.transform 속성에서 실행되는 작업은 top나 left에서 실행되는 작업과 같습니다.
말로 이해하기 어려워서 그림을 그려 봤어요.↓

만약에 top와 left에서 원소의 가장자리를 지정하는 것도 어렵다면transform이라도 반대의 위치에서 위치를 지정하면 양자의 값은 평균되고 원소는 정중간에 있다.
위의 그림은 간소화하기 위해 가로를 가운데에 놓으면 되지만, 세로도translateY와 top를 가운데에 놓으면 가로가 중간이기 때문에 중앙 설정을 할 수 있습니다.
css의 표기는 이렇다.↓


.text_on_image {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    /* または
    bottom: 50%;
    right: 50%;
    transform: translateY(50%) translateX(50%); */
}

댓글에도 top,left,bottom,right의 지정을 사용하지 않아도 된다고 적혀 있다.이런 상황에서 원소가 중간에 위치하도록 트랜스포머 값을 다시 써야 한다.

감상

저녁을 하기 전에 오늘의 몫을 하려고 했는데 반할 줄은 몰랐는데, 결국 두 시간 동안 배가 고파서 인코딩을 했다.특히 텍스트의 중앙 설정은 의외로 시간을 먹었다.처음에 나는 왜 top만 있고 left는 중앙 설정이 될 수 없는지 의심스러웠지만'원소의 가장자리가 지정한 부분에 온다'와'transform 속성을 알고 싶었다.하지만 죽음을 무릅쓰는 것은 처음이라 언젠가는 직접적인 요소를 중앙에 배치할 수 있도록 수정할 것이다.그럼에도 불구하고 이렇게 많이 알면 absolute와 함께 요소를 자유롭게 배치할 수 있어서 기분이 좋습니다.네, 저녁 먹으러 갈게요!
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료

[CSS]img 이미지의 종횡비를 유지한 상태에서 상자에 넣는 방법

CSS'position:relative'와'position:absolute'로 이미지와 문자를 겹치는 방법https://1design.jp/web-development/css/1844

많이 배웠어요.정말 감사합니다.

Reference

이 문제에 관하여(연말까지 매일 웹 사이트를 지속적으로 제작하는 대학생~ 25일째 이미지의 종횡비례를 최대한 유지하고 이미지에 텍스트(중앙설정)를 표시합니다~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/70days_js/items/2dadc82aa04999889a8b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)