CSS img 왜곡을 처리하는 방법

CSS IMG 왜곡 해결 방법: 1. 해당 CSS 파일을 엽니다. 2. "object-fit:none;"을 설정하여 원본 요소 콘텐츠의 길이와 너비를 유지합니다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

CSS img가 왜곡되면 어떻게 해야 하나요?

CSS 스타일 너비: 100% 이미지 왜곡

화면은 1920픽셀, img 너비 설정: 1920px 고정 크기, 이미지는 왜곡되지 않음, 너비 설정: 100% 이미지 왜곡

img{
      display:block;  /*img图片比父元素高度小几个像素，设置为块元素，使得父子div高度一致*/
      width:100%;
}

해결 방법 이미지를 화면 크기에 맞게 조정하고 너비를 100%로 설정하면 이미지 왜곡 문제가 발생합니다

object-fit: none;    /*保留原有元素内容的长度和宽度*/

효과가 확실하지 않으면 텍스트가 있는 사진을 선택하면 선명도의 차이를 아주 잘 볼 수 있습니다

img{
      width:100%;
      max-width:100%;
      object-fit:none;
}

하지만 object-fit:none 을 설정한 후 화면 크기가 그림 크기보다 작으면 그림이 자동으로 중간 위치로 잘립니다.

관련 확장:

1990년 Tim Berners-Lee와 Robert Cailliau가 공동으로 웹을 발명했습니다. 1994년에 웹은 실제로 실험실에서 탄생했습니다.

HTML이 발명된 이래로 스타일은 다양한 형태로 존재해 왔습니다. 다양한 브라우저는 자신만의 스타일 언어를 결합하여 사용자에게 페이지 효과를 제어할 수 있는 기능을 제공합니다. 원본 HTML에는 몇 가지 표시 속성만 포함되어 있습니다.

HTML의 성장과 함께 페이지 디자이너의 요구 사항을 충족하기 위해 HTML에는 많은 표시 기능이 추가되었습니다. 그러나 이러한 기능이 증가함에 따라 HTML은 점점 더 복잡해지고 HTML 페이지는 점점 더 비대해집니다. 그래서 CSS가 탄생했습니다.

이하쿤은 1994년에 CSS의 원래 제안을 제안했습니다. 당시 Bert Bos는 Argo라는 브라우저를 디자인하고 있었기 때문에 CSS를 함께 디자인하기로 결정했습니다.

사실 당시 인터넷 업계에서는 이미 스타일 시트 언어를 통합하자는 제안이 있었지만, "캐스케이딩(Cascading)"이라는 풍부한 의미를 지닌 최초의 스타일 시트 언어는 CSS였습니다. CSS에서는 한 파일의 스타일이 다른 스타일 시트에서 상속될 수 있습니다. 독자는 어떤 곳에서는 자신이 선호하는 스타일을 사용할 수 있고 다른 곳에서는 작가의 스타일을 상속하거나 "계단식" 적용할 수 있습니다. 이러한 계층적 접근 방식은 작성자와 독자 모두에게 자신만의 디자인을 추가하고 모두가 좋아하는 것을 혼합할 수 있는 유연성을 제공합니다.

하쿤은 1994년 시카고 컨퍼런스에서 처음으로 CSS를 제안했습니다. CSS는 1995년 www 네트워크 컨퍼런스에서 다시 제안되었습니다. 보스는 CSS를 지원하는 아르고 브라우저의 예를 시연했고, 하쿤도 CSS를 지원하는 아레나 브라우저를 선보였습니다.

같은 해에 W3C 조직(World WideWeb Consortium)이 설립되었습니다. CSS의 모든 창의적인 구성원이 W3C 작업 그룹이 되어 CSS 표준 개발에 총력을 기울였습니다. 마침내 올바른 궤도에 올랐습니다. . Microsoft의 Thomas Reaxdon을 비롯한 점점 더 많은 회원이 참여했으며 이들의 노력은 결국 Internet Explorer 브라우저에서 CSS 표준을 지원하게 되었습니다. 하쿤, 페르시아 등이 이 프로젝트의 주요 기술 리더입니다. 1996년 말 CSS의 첫 번째 초안이 완성되었으며 같은 해 12월에 Cascading Style Sheets(Cascading Style Sheets Level 1)에 대한 첫 번째 공식 표준이 완성되어 w3c에서 권장되는 표준이 되었습니다.

1997년 초, CSS를 담당하는 W3C 워킹 그룹은 첫 번째 버전에서 다루지 않은 문제를 논의하기 시작했습니다. 논의의 결과로 1998년 5월에 CSS 사양의 두 번째 판이 출판되었습니다.

추천 학습: "css 동영상 튜토리얼"

위 내용은 CSS img 왜곡을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!