Czy mogę zmienić wysokość obrazu w CSS: przed /: po pseudoelementach?

251

Załóżmy, że chcę ozdobić łącza do niektórych typów plików za pomocą obrazu. Mogę zadeklarować moje linki jako

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

wtedy mają CSS jak

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

Teraz działa to świetnie, chyba że pdf.pngnie ma odpowiedniego rozmiaru dla mojego tekstu linku.

Chciałbym móc powiedzieć przeglądarce, aby skalowała :afterobraz, ale przez całe życie nie mogę znaleźć właściwej składni. Czy to jest jak obrazy tła, w których zmiana rozmiaru jest po prostu niemożliwa?

ETA: Skłaniam się do albo: a) zmiany rozmiaru obrazu źródłowego, aby był „odpowiedni” rozmiar, po stronie serwera i / lub b) zmiany znaczników, aby po prostu podać tag IMG w tekście. Starałem się unikać obu tych rzeczy, ale brzmią one tak, jakby były bardziej kompatybilne niż próby robienia rzeczy wyłącznie z CSS. Odpowiedź na moje pierwotne pytanie wydaje się brzmieć „ czasem możesz to zrobić”.

Coderer
źródło
1
Czy istnieje ważny powód, dla którego nie używasz tagów „img” z tagami „a” owiniętymi wokół nich? Jest to bardziej typowa składnia obrazu, który jest również linkiem. Mówię to, ponieważ nawet jeśli uruchomisz metodę, możesz mylić innych programistów. CSS ma również dobrą reputację ze względu na niestałość między przeglądarkami / wersjami.
Servy
4
Doceniam ten problem, po prostu niekoniecznie kontroluję generowanie znaczników - w tym przypadku mogę jedynie zmienić styl, a nie zrestrukturyzować.
Coderer
Długa dyskusja na liście mailingowej W3C: lists.w3.org/Archives/Public/www-style/2011Nov/...
user123444555621

Odpowiedzi:

375

Dostosowanie background-sizejest dozwolone. Jednak nadal musisz określić szerokość i wysokość bloku.

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

Zobacz pełną tabelę kompatybilności w MDN .

Ansel Santosa
źródło
3
Jest to świetne, z wyjątkiem tego, że większość naszych klientów korzysta z IE 7 lub 8 (bzdury, przepraszam).
Coderer
14
W takim przypadku nie powinieneś w ogóle używać :after. Nie jest obsługiwany poniżej IE8.
Ansel Santosa
24
Ta technika wymagała również ustawienia, width: 10px; height: 20px;aby zobaczyć obraz.
tutaj
5
Należy również zauważyć, że to rzeczywiście działa, ale tylko w przypadku określonej background-imagewłaściwości, proste backgroundnie będzie działać.
Gruber,
4
(Dla :before) Też potrzebowałem position: absolutei left: -10px.
Hugo,
95

Zauważ, że :afterpseudoelement jest pudełkiem, które z kolei zawiera wygenerowany obraz. Nie ma sposobu na stylizację obrazu, ale możesz stylizować pudełko.

Poniżej znajduje się tylko pomysł, a powyższe rozwiązanie jest bardziej praktyczne.

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

http://jsfiddle.net/Nwupm/

Wady: musisz znać wewnętrzne wymiary obrazu i pozostawia ci trochę białych znaków, których nie mogę pozbyć się bankomatu.

użytkownik123444555621
źródło
6
zoom: warto również wziąć pod uwagę 0,5.
Alex
Podoba mi się pomysł tego rozwiązania, ale odrzuca pozycjonowanie, szczególnie w scenariuszu z wbudowanym blokiem. (IE 11)
Christopher Davies
1
Zoom nie jest dobrze obsługiwany.
1
jsfiddle nie zmienia rozmiaru. Używam najnowszego Firefoksa. Próbowałem także ostatniego przykładu jsfiddle w tym poście, używając zoomu, i to też nie działa.
Ryan
1
Tylko uwaga: w moim przypadku musiałem wstawić position: absolute, aby dostać się transform: scale(0.5)do pracy. Musiałem także wprowadzić position: relativeelement „rodzic” (właściciel :afterpseudo) dla zachowania zdrowia psychicznego. Musiałem też dodać translate(-16px, -16px)do mojej transformacji, aby poprawnie ustawić ikonę 16x16. Ma position: absoluterównież tę zaletę, że eliminuje problem białych znaków.
Braden Best
34

Ponieważ moja inna odpowiedź nie była oczywiście dobrze zrozumiana, oto druga próba:

Istnieją dwa podejścia do odpowiedzi na pytanie.

Praktyczne (po prostu pokaż mi ten cholerny obraz!)

Zapomnij o :afterpseudo-selektorze i wybierz coś takiego

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

Teoretyczny

Pytanie brzmi: czy możesz stylizować generowaną treść ? Odpowiedź brzmi: nie, nie możesz. Nastąpiła długa dyskusja na liście mailingowej W3C w tej sprawie, ale żadne rozwiązanie nie tak daleko.

Wygenerowana treść jest renderowana w wygenerowane pole i można nadać mu styl, ale nie treść jako taką . Różne przeglądarki wykazują bardzo różne zachowania

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

Chrome zmienia rozmiar pierwszego, ale używa wewnętrznych wymiarów obrazu dla drugiego

Firefox, tj. nie obsługują pierwszego, i używają wewnętrznych wymiarów dla drugiego

opera używa wewnętrznych wymiarów w obu przypadkach

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

Podobnie przeglądarki wyświetlają bardzo różne wyniki dotyczące takich rzeczy, jak http://jsfiddle.net/Nwupm/1/ , gdzie generowany jest więcej niż jeden element. Należy pamiętać, że CSS3 jest wciąż na wczesnym etapie rozwoju i ten problem nie został jeszcze rozwiązany.

użytkownik123444555621
źródło
1
@TJ Każda osobna odpowiedź zasługuje na odpowiedź (jeśli nie jest to wystarczająco oczywiste), która otrzyma różne liczby głosów pozytywnych i będzie widziana / cytowana / udostępniana inaczej w zależności od treści odpowiedzi.
Timo Huovinen,
13

Powinieneś użyć tła zamiast obrazu.

.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;

}
Santi Nunez
źródło
6

diplay: block; nie mają żadnego efektu

positionin działa również bardzo dziwnie, jeśli chodzi o podstawy, więc bądź ostrożny

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}
Dmytro Jurczenko
źródło
4

Oto inne (działające) rozwiązanie: po prostu zmień rozmiar swoich zdjęć do pożądanego rozmiaru :)

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

potrzebujesz pdf.png, aby mieć 20px * 10px, aby to działało. 20px / 10px w css są tutaj, aby podać rozmiar bloku, aby elementy, które następują po bloku, nie zostały pomieszane z obrazem

Nie zapomnij zachować kopii surowego obrazu w oryginalnym rozmiarze

Tomasz
źródło
To żarty na wezwanie !!
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:"";
}
Ravi Soni
źródło
2

Możesz skorzystać z zoomwłaściwości. Sprawdź to jsfiddle

Plamen
źródło
1
Sprawdzając jsfiddle, oba mają ten sam rozmiar, a zoom jest podświetlony na czerwono.
Ryan
Obecnie nie ma zmiany rozmiaru w Firefoksie 53. Mamy nadzieję, że można to zaimplementować w późniejszej wersji przeglądarki Firefox. Dobrze wiedzieć, że działa przynajmniej w Chrome. :-)
Ryan
2

Możesz zmienić wysokość lub szerokość elementu Before lub After w następujący sposób:

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}
Nesha Zoric
źródło
1

Użyłem tej szerokości kontrolnej rozmiaru czcionki

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}
Andre Jesus Seiji Nishi
źródło
1

Obecnie za pomocą Flexboksa możesz znacznie uprościć swój kod i dostosować tylko 1 parametr w razie potrzeby:

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

Teraz możesz po prostu dopasować szerokość elementu, a wysokość automatycznie się dostosuje, zwiększ / zmniejsz szerokość, aż wysokość elementu osiągnie żądaną liczbę.

gra logiczna
źródło
1
Nie działało to dla mnie, może dlatego, że obraz jest svg, może dlatego, że rodzic jest elastycznym kontenerem.
Miguel Pynto,
też nie na jpgurl(//placeimg.com/800/200/arch)
BananaAcid
0
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
uyghurbeg
źródło