Tôi có thể thay đổi chiều cao của hình ảnh trong CSS: trước /: sau các phần tử giả không?


251

Giả sử tôi muốn trang trí liên kết đến các loại tệp nhất định bằng một hình ảnh. Tôi có thể tuyên bố các liên kết của tôi là

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

sau đó có CSS ​​như

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

Bây giờ, điều này hoạt động rất tốt, trừ khi pdf.pngkhông phải là kích thước phù hợp cho văn bản liên kết của tôi.

Tôi muốn có thể nói với trình duyệt chia tỷ lệ :afterhình ảnh, nhưng tôi không thể tìm ra cú pháp đúng. Hay đây giống như hình nền, trong đó việc thay đổi kích thước là không thể?

ETA: Tôi đang nghiêng về a) thay đổi kích thước hình ảnh nguồn thành kích thước "đúng", phía máy chủ và / hoặc b) thay đổi đánh dấu để chỉ cung cấp nội tuyến thẻ IMG. Tôi đã cố gắng tránh cả hai điều đó nhưng có vẻ như chúng sẽ tương thích hơn là cố gắng làm mọi thứ hoàn toàn bằng CSS. Câu trả lời cho câu hỏi ban đầu của tôi có vẻ là "bạn có thể sắp xếp các làm điều đó, đôi khi".


1
Có một lý do thuyết phục nào cho thấy bạn không sử dụng các thẻ 'img' với các thẻ 'a' bao quanh chúng? Đó là cú pháp điển hình hơn cho một hình ảnh cũng là một liên kết. Tôi nói điều này bởi vì ngay cả khi bạn làm cho phương thức của mình hoạt động, bạn có thể gây nhầm lẫn cho các nhà phát triển khác. CSS cũng có một danh tiếng mạnh mẽ về sự bất tiện giữa các trình duyệt / phiên bản.
Phục vụ

4
Tôi đánh giá cao vấn đề này, chỉ là tôi không nhất thiết phải kiểm soát việc tạo đánh dấu - trong trường hợp này tôi chỉ có thể tạo kiểu lại, không cấu trúc lại.
Bộ giải mã

Thảo luận dài về danh sách gửi thư của W3C : lists.w3.org/Archives/Public/www-style/2011Nov/ợi
user123444555621

Câu trả lời:


375

Điều chỉnh background-sizeđược cho phép. Tuy nhiên, bạn vẫn cần chỉ định chiều rộng và chiều cao của khối.

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

Xem Bảng tương thích đầy đủ tại MDN .


3
Điều này thật tuyệt vời ngoại trừ hầu hết các khách hàng của chúng tôi đều sử dụng IE 7 hoặc 8 (vô lý, xin lỗi).
Bộ giải mã

14
Nếu đó là trường hợp, bạn hoàn toàn không nên sử dụng :after. Nó không được hỗ trợ dưới IE8.
Ansel Santosa

24
Kỹ thuật này cũng yêu cầu thiết lập width: 10px; height: 20px;để xem hình ảnh.
ở đây

5
Cũng lưu ý rằng điều này thực sự hoạt động, nhưng chỉ với background-imagetài sản cụ thể , đơn giản backgroundsẽ không hoạt động.
Gruber

4
(Vì :before) Tôi cũng cần position: absolute, và left: -10px.
Hugo

95

Lưu ý rằng :afterphần tử giả là một hộp, trong đó lần lượt chứa hình ảnh được tạo. Không có cách nào để tạo kiểu cho hình ảnh, nhưng bạn có thể tạo kiểu cho hộp.

Sau đây chỉ là một ý tưởng, và giải pháp ở trên là thực tế hơn.

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

http://jsfiddle.net/Nwupm/

Hạn chế: bạn cần biết kích thước nội tại của hình ảnh và nó để lại cho bạn một số khoảng trắng mà tôi không thể thoát khỏi ATM.


6
zoom: 0,5 cũng đáng xem xét.
Alex

Tôi thích ý tưởng của giải pháp này, nhưng nó loại bỏ việc định vị, đặc biệt là trong một kịch bản chặn nội tuyến. (IE 11)
Christopher Davies

1
thu phóng không được hỗ trợ tốt.

1
jsfiddle không thay đổi kích thước. Tôi đang sử dụng Firefox mới nhất. Tôi cũng đã thử ví dụ jsfiddle cuối cùng trong bài đăng này bằng cách sử dụng zoom và nó cũng không hoạt động.
Ryan

1
Chỉ cần một lưu ý: trong trường hợp của tôi, tôi đã phải đưa position: absolutevào transform: scale(0.5)để thực sự làm việc. Tôi cũng đã phải đưa position: relativevào yếu tố "cha mẹ" (chủ sở hữu của :aftergiả) cho sự tỉnh táo. Ngoài ra, tôi đã phải thêm translate(-16px, -16px)vào biến đổi của mình để định vị biểu tượng 16x16 một cách chính xác. Điều này position: absolutecũng có lợi ích trong việc loại bỏ vấn đề khoảng trắng.
Braden hay nhất

34

Vì câu trả lời khác của tôi rõ ràng là không được hiểu rõ, đây là một nỗ lực thứ hai:

Có hai cách tiếp cận để trả lời câu hỏi.

Thực tế (chỉ cho tôi xem hình ảnh chết tiệt!)

Hãy quên :afterđi bộ chọn giả, và tìm kiếm một cái gì đó như

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

Lý thuyết

Câu hỏi là: Bạn có thể tạo kiểu cho nội dung không? Câu trả lời là: Không, bạn không thể. Đã có một cuộc thảo luận dài về danh sách gửi thư của W3C về vấn đề này, nhưng cho đến nay vẫn chưa có giải pháp nào.

Nội dung đã tạo được hiển thị vào hộp được tạo và bạn có thể tạo kiểu cho hộp đó, nhưng không phải là nội dung như vậy . Các trình duyệt khác nhau cho thấy hành vi rất khác nhau

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

Chrome thay đổi kích thước cái đầu tiên, nhưng sử dụng kích thước nội tại của hình ảnh cho hình ảnh thứ hai

firefox và tức là không hỗ trợ cái thứ nhất và sử dụng kích thước nội tại cho cái thứ hai

opera sử dụng kích thước nội tại cho cả hai trường hợp

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

Tương tự, các trình duyệt hiển thị kết quả rất khác nhau trên những thứ như http://jsfiddle.net/Nwupm/1/ , nơi có nhiều hơn một yếu tố được tạo. Hãy nhớ rằng CSS3 vẫn đang trong giai đoạn phát triển ban đầu và vấn đề này vẫn chưa được giải quyết.


1
@TJ Mỗi câu trả lời riêng biệt xứng đáng có một câu trả lời (Nếu điều đó không đủ rõ ràng), sẽ nhận được số lượng upvote khác nhau và sẽ được xem / trích dẫn / chia sẻ khác nhau dựa trên nội dung của câu trả lời.
Timo Huovinen

13

Bạn nên sử dụng nền thay vì hình ảnh.

.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; không có tác dụng

Positionin cũng hoạt động rất kỳ lạ với các cơ sở chính, vì vậy hãy cẩn thận

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

4

Đây là một giải pháp (làm việc) khác: chỉ cần thay đổi kích thước hình ảnh của bạn theo kích thước bạn muốn :)

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

bạn cần pdf.png là 20px * 10px để làm việc này. 20px / 10px trong css có ở đây để cung cấp kích thước của khối sao cho các phần tử đi sau khối không bị rối với hình ảnh

Đừng quên giữ một bản sao của hình ảnh thô ở kích thước ban đầu của nó


Đó là những trò đùa !!
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

Bạn có thể sử dụng zoomtài sản. Kiểm tra jsfiddle này


1
Kiểm tra jsfiddle, cả hai đều có cùng kích thước và thu phóng được tô sáng màu đỏ.
Ryan

Hiện tại nó không thay đổi kích thước trong Firefox 53. Hy vọng, điều này có thể được thực hiện trong phiên bản Firefox sau này. Thật tốt khi biết rằng nó hoạt động trong Chrome ít nhất. :-)
Ryan

2

Bạn có thể thay đổi chiều cao hoặc chiều rộng của phần tử Before hoặc After như thế này:

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

1

Tôi đã sử dụng chiều rộng kiểm soát kích thước phông chữ này

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

1

Ngày nay với flexbox, bạn có thể đơn giản hóa rất nhiều mã của mình và chỉ điều chỉnh 1 tham số khi cần:

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

Bây giờ bạn có thể chỉ cần điều chỉnh chiều rộng của phần tử và chiều cao sẽ tự động điều chỉnh, tăng / giảm chiều rộng cho đến khi chiều cao của phần tử nằm ở số bạn cần.


1
Không làm việc cho tôi, có thể vì hình ảnh là svg, có thể vì cha mẹ là một thùng chứa flex.
Miguel Pynto

cũng không phải trên jpgurl(//placeimg.com/800/200/arch)
BananaAcid

0
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.