CSS : before / : after pseudo-elements에서 이미지의 높이를 변경할 수 있습니까?


251

이미지를 사용하여 특정 파일 형식에 대한 링크를 장식한다고 가정합니다. 링크를 다음과 같이 선언 할 수 있습니다.

<a href='foo.pdf' class='pdflink'>A File!</a>

그런 다음 CSS를

.pdflink:after { content: url('/images/pdf.png') }

이제 pdf.png링크 텍스트에 적합한 크기가 아닌 경우를 제외하고 는 잘 작동 합니다.

브라우저에 :after이미지 크기를 조정하도록 지시 하고 싶지만 인생의 올바른 구문을 찾을 수는 없습니다. 또는 크기 조정이 불가능한 배경 이미지와 같은 것입니까?

ETA : 나는 a) 소스 이미지를 서버 크기의 "올바른"크기로 조정하거나 b) IMG 태그를 인라인으로 제공하기 위해 마크 업을 변경하려고합니다. 나는 그 두 가지를 피하려고 노력했지만 CSS로 순수하게 작업하는 것보다 더 호환되는 것처럼 들립니다. 내 원래의 질문에 대한 대답은 "당신이 할 수있을 것으로 보인다 일종의 때로는 그것을".


1
'a'태그가 포함 된 'img'태그를 사용하지 않는 강력한 이유가 있습니까? 그것은 링크이기도 한 이미지에 대한 가장 일반적인 구문입니다. 나는 당신이 당신의 방법을 작동 시키더라도 다른 개발자들을 혼란스럽게 할 수 있기 때문에 이것을 말합니다. CSS는 또한 브라우저 / 버전 사이의 불일치로 유명합니다.
Servy

4
문제를 고맙게 생각합니다. 마크 업 생성을 반드시 제어 할 필요는 없습니다.이 경우에는 재구성 할 수없고 재구성 할 수만 있습니다.
Coderer

: W3C의 메일 링리스트에 긴 토론 lists.w3.org/Archives/Public/www-style/2011Nov/...
user123444555621

답변:


375

조정 background-size이 허용됩니다. 그러나 여전히 블록의 너비와 높이를 지정해야합니다.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

MDN의 전체 호환성 표를 참조하십시오 .


3
대부분의 고객이 IE 7 또는 8을 사용한다는 점을 제외하고는 훌륭합니다.
Coderer

14
이 경우 전혀 사용하지 않아야 :after합니다. IE8 이하에서는 지원되지 않습니다.
Ansel Santosa

24
이 기술은 또한 width: 10px; height: 20px;이미지를보기위한 설정이 필요했습니다 .
여기

5
또한 이것은 실제로 작동하지만 특정 속성 에서만 작동한다는 점에 유의하십시오 . background-imagebackground
Gruber

4
(들어 :before) I도 필요 position: absolute하고 left: -10px.
휴고

95

점을 유의 :after가상 요소가 교대로 생성 된 이미지를 포함하는 박스이다. 이미지의 스타일을 지정할 수는 없지만 상자의 스타일을 지정할 수 있습니다.

다음은 단지 아이디어 일 뿐이며 해결책 이 더 실용적입니다.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

단점 : 이미지의 본질적인 크기를 알아야하며 ATM을 제거 할 수없는 공백이 생깁니다.


6
줌 : 0.5도 고려할 가치가 있습니다.
Alex

나는이 솔루션의 아이디어를 좋아하지만 인라인 블록 시나리오에서 위치 지정을 버립니다. (IE 11)
Christopher Davies

1
줌은 잘 지원되지 않습니다.

1
jsfiddle이 크기를 변경하지 않습니다. 최신 Firefox를 사용하고 있습니다. 또한 줌을 사용 하여이 게시물의 마지막 jsfiddle 예제를 시도했지만 작동하지 않습니다.
Ryan

1
참고 사항 : 내 경우에는 실제로 일 position: absolute하기 위해 넣어야 했습니다 transform: scale(0.5). 또한 건강을 위해 position: relative"부모"요소 ( :after의사 소유자 )를 입력해야했습니다. 또한 translate(-16px, -16px)16x16 아이콘을 올바르게 배치하려면 변환 에 추가 해야했습니다. 은 position: absolute또한 공백 문제를 제거하는 이점이있다.
Braden Best

34

내 다른 대답은 분명히 잘 이해되지 않았으므로 두 번째 시도는 다음과 같습니다.

질문에 대답하는 두 가지 방법이 있습니다.

실용적 (단지 사진을 보여주세요!)

:after의사 선택기를 잊어 버리고 다음과 같이하십시오.

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

이론적 인

문제는 생성 된 컨텐츠 를 스타일링 할 수 있습니까 ? 대답은 : 아니요, 할 수 없습니다. 이 문제 에 대한 W3C 메일 링리스트 에 대한 긴 토론 이 있었지만 지금까지는 해결책이 없습니다.

생성 된 컨텐츠는 생성 된 상자로 렌더링되며 해당 상자의 스타일을 지정할 수 있지만 컨텐츠는 그렇게 할 수 없습니다 . 브라우저마다 동작이 매우 다릅니다

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome은 첫 번째 크기를 조정하지만 두 번째 이미지의 고유 크기를 사용합니다.

파이어 폭스와 즉, 첫 번째를 지원하지 않으며 두 번째에는 고유 치수를 사용하십시오.

opera는 두 경우 모두에 고유 한 차원을 사용합니다.

( http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html에서 )

마찬가지로, 브라우저는 http://jsfiddle.net/Nwupm/1/ 과 같이 여러 요소가 생성되는 결과에 대해 매우 다른 결과를 보여줍니다 . CSS3는 아직 초기 개발 단계에 있으며이 문제는 아직 해결되지 않았습니다.


1
@TJ 각각의 개별 답변에는 답변이 필요합니다 (충분하지 않은 경우).
Timo Huovinen

13

이미지 대신 배경을 사용해야합니다.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

6

diplay: block; 효과가 없다

positionin은 또한 프론트 엔드 기초에 매우 이상하게 작동하므로주의하십시오.

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

4

여기에 또 다른 (작동하는) 해결책이 있습니다. 이미지를 원하는 크기로 조정하십시오. :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

이것이 작동하려면 pdf.png가 20px * 10px이어야합니다. CSS의 20px / 10px는 블록의 크기를 제공하기 위해 여기에 있으므로 블록 뒤에 오는 요소가 이미지와 엉망이되지 않습니다.

원본 이미지의 사본을 원래 크기로 유지하는 것을 잊지 마십시오


농담이야!
MD Ashik

3
.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

2

zoom속성을 사용할 수 있습니다 . 이 jsfiddle을 확인하십시오


1
jsfiddle을 확인하면 둘 다 동일한 크기이며 줌은 빨간색으로 강조 표시됩니다.
Ryan

현재 Firefox 53에서는 크기가 조정되지 않습니다. 바라건대, 이것은 Firefox 최신 버전에서 구현 될 수 있기를 바랍니다. Chrome에서 적어도 작동한다는 것을 아는 것이 좋습니다. :-)
Ryan

2

Before 또는 After 요소 의 높이 또는 너비를 다음 과 같이 변경할 수 있습니다 .

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

1

이 글꼴 크기 제어 너비를 사용했습니다.

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

1

오늘날 flexbox를 사용하면 코드를 크게 단순화하고 필요한 경우 하나의 매개 변수 만 조정할 수 있습니다.

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

이제 요소의 너비를 조정하기 만하면 높이가 자동으로 조정되고 요소의 높이가 필요한 숫자가 될 때까지 너비를 늘리거나 줄입니다.


1
이미지가 svg이거나 부모가 플렉스 컨테이너이기 때문에 저에게 효과적이지 않았습니다.
Miguel Pynto

jpg에 없습니다url(//placeimg.com/800/200/arch)
BananaAcid

0
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.