Im cố gắng tạo một svg trong trình minh họa và sử dụng nó làm hình nền để điền vào đầu và cuối trang nhưng vẫn nằm trong một div rộng 950px và không có vấn đề gì.Tạo một svg có tỷ lệ với chiều cao của trình duyệt nhưng có chiều rộng được đặt là
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>
Đây là svg của tôi, như bạn có thể thấy hoạ sĩ minh họa đã đưa ra các yếu tố chiều rộng và chiều cao. Tôi đã gỡ bỏ những cái tôi có thể đặt chúng trong css:
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
}
Tôi đã thử kết hợp khác nhau khác nhau loại bỏ các kích thước từ svg và thêm phong cách trong css như:
background-size: cover;
background-size: 950px cover;
background-size: 100% 100%;
background-size: contain;
nhưng không Tôi dường như làm việc. Bất kỳ ý tưởng? Có thể có điều gì đó cơ bản mà tôi không hiểu về svgs? Các hành vi, khi tôi có thể làm cho nó để hiển thị bất cứ điều gì ở tất cả, có vẻ là nó hoặc trở nên hoàn toàn thiết lập kích thước, hoặc thiết lập kích thước và sau đó khi tôi làm cho cửa sổ nhỏ hơn nó co lại chiều rộng và duy trì tỷ lệ khía cạnh.
nó phải trông giống như cửa sổ tuy nhiên lớn này là:
Nhưng khi tôi làm cho chiều cao cửa sổ lớn hơn bên cạnh nó disapears, điều này được sử dụng
background-size: cover;
Trong css, và không có kích thước trong svg.
Khi tôi thêm một chiều rộng thiết lập như sau:
background-size: 950px cover;
Nó hiển thị như thế này:
Và nếu tôi làm cho cửa sổ nhỏ hơn là thực hiện điều này:
Điều đặc biệt khó chịu.
EDIT
Phần còn lại của css và vẻ lo lắng HTML như vậy
CSS
/* Main Containers */
.center{
margin: 0px auto;
width: 1200px;
height: 100%;
}
#left{
width: 150px;
height: 100%;
display: block;
float: left;
background: #000000;
}
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
background-size: cover;
}
#right{
width: 100px;
height: 100%;
display: block;
float: left;
background: #000000;
}
HTML
<body>
<div class="center">
<div id="left">
<!-- Header -->
<!-- END Header -->
</div>
<!-- Nav -->
<div id="nav">
</div>
<!-- END Nav -->
<div id="middle">
</div>
<div id="right">
</div>
<!-- Footer -->
<!-- END Footer -->
</div>
</body>
Vậy đó là cách bạn làm điều đó. – bluefantail
Cho đến nay ive đã thử nghiệm tính năng này trong google chrome 21 và ff 14 – bluefantail