thay đổi kích cỡ hình ảnh svg được chèn với nội dung: url()

Question

Ok, những gì tôi nhận được sau đây: nhiều hình ảnh svg có độ rộng/chiều cao khác nhau được chèn vào html qua css. Tôi muốn mở rộng tất cả chúng với cùng chiều rộng nhưng điều đó không hoạt động (ít nhất là không có trong Safari, Chrome và Firefox).

html:

<h4 class="before" id="foo">Foo</h4> 
<h4 class="before" id="bar">Bar</h4> 
<h4 class="before" id="foobar">Foobar</h4> 

css:

.before:before { width: 20px; } 
#foo:before { content:url('foo.svg'); } 
#bar:before { content:url('bar.svg'); } 
#foobar: before { content:url('foobar.svg'); } 

Làm thế nào tôi có thể thay đổi kích thước những hình ảnh svg để họ được hiển thị với độ rộng 20px từng (nhưng không thay đổi svg chinh no)?

Answer 1

Nếu bạn biết độ cao sẽ là gì, bạn có thể đặt hình ảnh làm hình nền cho các phần tử giả và khai báo background-size: 20px auto;, nhưng bạn cần biết kích thước chính xác hoặc lớn hơn cho chiều cao của psuedo - chính nó.

Ngoài ra, tôi đã không thể tìm thấy cách để làm cho nó hoạt động hoàn toàn chỉ trong CSS. Nếu bạn có quyền truy cập vào mã hóa phía máy chủ, bạn có thể mở tệp SVG và cá ra các kích thước tự động.