하고 싶은 건 원래 사이즈 200.×200에 대한 내접 조정을 하고 싶어요.

개시하다

CSS의 Object-fit은 속성에 적응했을 뿐, 지금까지 이미지의 크기가 길었는지 길었는지에 따라 세로로 조정되었습니다.구체적인 방법은 다음과 같다.

JavaScript를 통한 이미지 크기 적절

세로에서 가로로 빼기

마이너스인지 여부에 따라 가로 길이를 클라스로 맞히느냐, 세로 길이를 클라스로 맞히느냐

자바스크립트로 class 추가

절대 쓸모없는 CS3가 대단하다고 들었는데 조사해보면 되겠네!

5분 후

CSS의 Object-fit 속성은 대체 요소의 내용을 사용자가 사용하는 높이와 너비로 구성된 상자에 삽입하는 방법을 지정합니다.
이렇게 끝났습니다!
그래서 샘플을 만들어 봤어요.
샘플용 이미지는 Placehold.jp라는 사이트에서 생성된 것이다.
매우 편리하기 때문에 자주 사용합니다.감사합니다!
이용약관 보니까 신인가요?나는 생각할수록 부드러워진다.(트위터를 보면 하루에 10만 정도 여유가 생겨서 그림을 만든다)

샘플 코드

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>sample object fit</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <div>
    <h2>オリジナルサイズ</h2>
    <p>320×240サイズ<p>
    <img src="http://placehold.jp/320x240.png">
    <p>240×320サイズ<p>
    <img src="http://placehold.jp/240x320.png">
  </div>

  <div>
    <h2>200×200に内接リサイズした場合</h2>
    <p>320×240サイズ<p>
    <img class="contain" src="http://placehold.jp/320x240.png">
    <p>240×320サイズ<p>
    <img class="contain" src="http://placehold.jp/240x320.png">
  </div>
</body>
</html>

main.css

.contain {
    object-fit: contain;
    width: 200px;
    height: 200px;
    background-color: #aaa;
}

주의점

대응하는 브라우저를 확인할 필요가 있죠?
http://caniuse.com/#search=object-fit
IE?Edge?모르는 애야...

총결산

JavaScript 코드가 누락되었습니다.외접성 크기도 컨테이너를 커버로 변경할 뿐이다.
메인 브라우저가 대응하는 것 같으니 문제가 없으면 CSS만 내부 조정하세요!

Reference

이 문제에 관하여(JavaScript를 사용하지 않고 이미지를 좋은 크기로 표시하면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/togana/items/58d8fd2a8215aec2dc76

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

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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다