div 아래의 이미지에 대한 적응형 솔루션

저자：Eve Cole 업데이트 시간：2025-01-17 10:12:01

우리(특히 나 같은 초보자)는 종종 사진 적응이라는 문제에 직면합니다. 이 문제는 매우 일반적입니다. 기사 영역과 포럼에서는 사진을 업로드해야 하는 곳마다 이 문제가 존재한다고 말할 수 있으며, 포럼에서 사람들이 때때로 이에 대해 질문합니다. 왜? 그 이유는 간단합니다. 웹 편집자나 포럼 회원에게 이미지를 자르거나 가장 기본적인 HTML 코드를 이해할 수 있도록 요구할 수는 없습니다. 기술적인 내용은 많지 않지만 말입니다.

이전 솔루션은 주로 js를 사용하여 구현했지만, 이를 사용해 본 사람이라면 이 방법이 다소 번거롭다는 것을 알고 있습니다. 또 다른 방법은 외부 컨테이너에 over-flow:hidden을 정의하는 것입니다. 하지만 이 방법은 사진만 잘라낼 뿐 자동으로 적용되지는 않습니다.

다음 방법의 출현은 훌륭한 CSS2.0과 훨씬 더 뛰어난 Microsoft에 감사해야 합니다(그것이 없었다면 그렇게 장황한 코드가 필요 없었을 것입니다^_^). 나는 winXP의 ie6.0, ff1.5, Opera7.0에 대한 테스트만 통과했습니다. 이 기사를 사용하여 다른 사람들에게 영감을 주고 더 많은 전문가가 지침을 제공할 수 있기를 바랍니다. 핵심은 max-width:780px; 그리고 아래 줄입니다.

고정 픽셀 적응:

코드 상자 실행

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; /> <title>css2.0 VS ie</title> <style type=text/css>  </style> </head> <body> <div id=pic> <img src=http ://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=핫링크된 사진을 제공해 주신 blueidea에게 감사드립니다! /> </div> </body> </html>

[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

적응율:

코드 상자 실행

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; /> <title>css2.0 VS ie</title> <style type=text/css>  </style> </head> <body > <div 아이디=그림> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=핫링크된 사진을 보내주신 blueidea님께 감사드립니다! /> </div> </body> </html>

[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

상기시키다:

1 이 방법은 img에만 적용되는 것이 아닙니다.

2개의 최대 너비, 최대 높이, 최소 너비, 최소 높이.

CSS의 표현식 사용 소개

작가: dozb

정의

IE5 이상 버전에서는 CSS 속성을 Javascript 표현식과 연결하기 위해 CSS에서 표현식 사용을 지원합니다. 여기서 CSS 속성은 요소의 고유 속성이거나 사용자 정의 속성일 수 있습니다. 즉, CSS 속성 뒤에는 자바스크립트 표현식이 올 수 있으며, CSS 속성의 값은 자바스크립트 표현식 계산 결과와 동일합니다. 표현식에서 요소 자체의 속성과 메서드를 직접 참조하거나 다른 브라우저 개체를 사용할 수 있습니다. 표현식은 이 요소의 멤버 함수 내에 있는 것과 같습니다.

요소의 고유 속성에 값을 할당합니다.

예를 들어 브라우저 크기에 따라 요소를 배치할 수 있습니다.

#myDiv {

위치: 절대;

너비: 100px;

높이: 100px;

왼쪽: 표현식(document.body.offsetWidth - 110 + px);

상단: 표현식(document.body.offsetHeight - 110 + px);

배경: 빨간색;

}

요소 사용자 정의 속성에 값 할당

예를 들어 페이지 링크의 점선 상자를 제거하세요.

일반적인 접근 방식은 다음과 같습니다.

언뜻 보면 표현식을 사용하는 것의 장점이 분명하지 않을 수 있지만, 페이지에 수십, 심지어 수백 개의 링크가 있는 경우에도 Ctrl+C와 Ctrl+V를 기계적으로 사용하시겠습니까? 비교하면 어느 것입니까? 더 많은 중복 코드를 생성합니까?

표현의 사용방법은 다음과 같습니다.

<스타일 유형=텍스트/css>

a {별 : 표현식(onfocus=this.blur)}

</style>

설명하다:

내부의 별표는 사용자가 원하는 대로 정의할 수 있습니다. 그러면 표현식()에 포함된 문은 기본적으로 사용자 정의 속성과 표현식 사이에 따옴표를 넣는 것을 잊지 마세요. 여전히 CSS이므로 스크립트가 아닌 스타일 태그에 배치됩니다. 자, 페이지의 링크 점선 상자를 한 문장으로 쉽게 제거할 수 있습니다. 하지만 너무 안주하지 마세요. 특수 효과가 CSS 속성 변경으로 인해 발생하면 원래 의도와는 다른 결과가 나올 수 있습니다. 예를 들어 마우스의 움직임에 따라 페이지의 텍스트 상자 색상을 변경하려면 다음과 같이 작성해야 한다고 자연스럽게 생각할 수 있습니다.

/* 원본 텍스트가 깨져서 수정할 시간이 없습니다. 죄송합니다!*/

그러나 결과는 스크립트 오류입니다. 이를 작성하는 올바른 방법은 아래와 같이 함수에 CSS 스타일 정의를 작성하는 것입니다.

<스타일 유형=텍스트/css>

입력 {별 : 표현식(onmouseover=함수()

{this.style.BackgroundColor=#FF0000},

onmouseout=function(){this.style.BackgroundColor=#FFFFFF}) }

</style>

<입력 유형=텍스트>

알아채다:

표현식에는 상대적으로 많은 브라우저 리소스가 필요하므로 일반적으로 표현식을 사용하지 않는 것이 좋습니다.