감사합니다.히로유키입니다!
오늘

"CSS에서 이미지를 자유롭게 재단하는 방법"

제가 소개해 드릴게요!
그러니까

원하는 위치에서 이미지 표시를 잘라낼 수 있습니다!

너무 좋아요~

나도 해봤는데 너무 쉬워서 깜짝 놀랐어요(웃음)

실제 이용 예는 다음과 같다.

원본 이미지 업로드 기능

잘라낸 초상화는 ※ 잘라낸 높이를 임의로 지정할 수 있습니다!

원본 이미지 업로드 기능 구현

HTML

<h2>トップ画像をアップ</h2>

<figure>

        <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}">
        <figcaption>現在のチャンネルトップ画像（編集前）</figcaption>

</figure>

<form method="POST" action="/storeTop" enctype="multipart/form-data">

         {{ csrf_field() }}

         <input type="file" name="photo" class="btn">

　　　　　<input type="submit" value="更新する？" class="button btn btn-primary">
             　
</form>

코드가 이런 느낌이에요.

업로드된 이미지의 img 태그를 표시하는 src="~"의 내용은 물론 자유로운 경로를 넣으십시오!

여기서 PHP/Laravel을 사용하여 S3라는 AWS의 저장 기능 경로를 나타냅니다.
그림을 저장하는 경로만 넣으면 돼요!!

CSS를 사용하여 이미지 잘라내기!

네, 여기서부터 본론이에요!
HTML

<h2>トップ画像を編集</h2>

<figure>

        <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}" style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;">
        <figcaption>現在のチャンネルトップ画像（編集済）</figcaption>

</figure>

<form method="POST" action="/topTrim">
   <div class="form-group">
     <label>切り取る位置（高さ）を 0 ~ 100 の数値で入力</label>
     <div>
          <input type="number" name="top_trim" required>
          <div>例）画像の一番上を切り取る : 0 を入力</div>
          <div>   画像の一番下を切り取る : 100 を入力</div>

     </div>
   </div>

   <input type="submit" value="更新する？" class="btn btn-primary">

</form>

img 태그의 src="~"에서 위에 업로드된 이미지를 표시하는 "같은 경로"
그것을 잘라라!

내 페이지에서 나는 트위터의 내 페이지의 첫 페이지 이미지처럼 가로로 가늘고 길게 자르고 싶다

(위 코드도 가로로 길기 때문에 오른쪽으로 굴러가지 않으면 이해하기 어려울 수도 있어요(웃음)
img 태그에서

style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;

"width:1200px;height:200px", "표시하고 싶은 이미지 너비·높이"라고 임의로 쓰여있습니다!
그럼 여기서부터 포인트!

"object-fit:cover;"기재를 통하다

"이미지의 드래그 비율을 유지하면 편집할 수 있습니다!!!"

처음 했을 때'대단하네~'(웃음)
그 밖에

객체 위치: 가로 방향% 세로 방향%하면, 만약, 만약...

"가로 위치 = 맨 왼쪽부터 ○% 위치에서 잘라내기"

"세로 위치 = 맨 위에서 ○%까지 잘라내기"

뭐랄까, 아주 유연하고 효과적이고,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,눈물
이 CSS의 설정 방법도 매우 심오하다. 내가 쓴 것이 아니다
아래 사이트를 참조하세요~

한 줄 추가하면 오케이!CSS만 사용하여 이미지를 클립할 수 있는 "object-fit" 속성

https://www.webcreatorbox.com/tech/object-fit

그러면 내 페이지에서 상술한 기능을 더욱 발전시키다

잘라낸 이미지의 높이(세로 위치 ○%)를 사용자가 원하는 높이로 설정할 수 있습니다.

즉, 코드를 보면 알 수 있다는 것이다

object-position:0% {{ $user->top_trim }}%;

이렇게

"%" 이전의 숫자를 변수로 하여 임의의 값(고도 백분율)을

내가 가져올게!!

여기에는 Laravel의 변수로 표현됩니다. 물론 JavaScript의 변수 등 다른 변수도 가능합니다~!

실제 서비스에서 상술한 기능을 시도하여 확인하는 것이 가장 이해하기 쉽다

내 서비스에 대한 링크가 아래에 실릴 것 같다

내가 만든 오리지널 웹 서비스(이하 링크)

http://youtubematome.herokuapp.com

새 사용자 로그인 → 채널 설정 → 페이지 중간에 있는 "맨 위 이미지 편집"
실제로 사용할 수 있다!!
가능하다면 ~