CSS3 рдХреА рдирдИ background-size
рд╕рдВрдкрддреНрддрд┐ рдХреЛ background
рд╢реЙрд░реНрдЯрд╣реИрдВрдб рдШреЛрд╖рдгрд╛ рдореЗрдВ рд╢рд╛рдорд┐рд▓ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ, рдЗрд╕реЗ background-position
рд╡рд┐рдирд┐рд░реНрджреЗрд╢ рд╕реЗ рдЖрдЧреЗ рд╕реНрд▓реИрд╢ рдХреЗ рд╕рд╛рде рдЕрд▓рдЧ рдХрд░рдХреЗ, рдЗрд╕ рддрд░рд╣:
div {
background: url('/path/to/image.png') left center / contain no-repeat;
}
рдкрд░рд┐рдгрд╛рдо рдПрдХ рд╕рд┐рдВрдЯреИрдХреНрд╕ рддреНрд░реБрдЯрд┐ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐, рдкрд╛рд░реНрд╕рд░ рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ / contain
рднрд╛рдЧ рдкрд░ рдШреБрдЯ рд░рд╣рд╛ рд╣реИ - рдЗрд╕реЗ рд╣рдЯрд╛рдиреЗ рд╕реЗ рддреНрд░реБрдЯрд┐ рднреА рдЧрд╛рдпрдм рд╣реЛ рдЬрд╛рддреА рд╣реИред
рдмреЗрд╢рдХ background
рд╕рдВрдкрддреНрддрд┐ рдХреЗ рдкреВрд░реЗ рдореВрд▓реНрдп рд╕реЗ рдмрдЪрдХрд░ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рд╣рд▓ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реИ ~"тАж"
, рд▓реЗрдХрд┐рди рдкреНрд░рддрд┐рдмрдВрдзреЛрдВ рдХреЗ рдмрд┐рдирд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╕рд┐рдВрдЯреИрдХреНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред
рдкреАрдЖрд░ #915 рдХрд╛ рдПрдХ рдЙрдк-рдорд╛рдорд▓рд╛ рд▓рдЧрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЙрд╕ рдкрд░ рдХреБрдЫ рд╕рдордп рд╕реЗ рдХреЛрдИ рдЦрдмрд░ рдирд╣реАрдВ рдЖрдИ рд╣реИ ...
рд╣рд╛рдБ, рдареАрдХ рдпрд╣реА рдХрд╛рд░рдг рд╣реИ рдХрд┐ рдпрд╣ 1.4.0 рдореЗрдВ рд╣реЛрдЧрд╛ред рдЕрдЧрд░ @dmcass рдиреЗ рдЗрд╕реЗ рд╕рдорд╛рдкреНрдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рддреЛ рдореИрдВ #915 рдкрд░
рдорд╛рд╕реНрдЯрд░ рдкрд░ рдлрд┐рдХреНрд╕реНрдб
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдХрдо 2.1.1 рдореЗрдВ рд╣реЛ рд░рд╣реА рд╣реИред
/* less */
#header {
height: 50px;
width: 100%;
padding: 0 10px;
font-size: 20px;
background: url("/img/nav-back.jpg") 0 0/100%;
position: fixed;
}
/* compiled css */
#header {
height: 50px;
width: 100%;
padding: 0 10px;
font-size: 20px;
background: url("/img/nav-back.jpg") 0 0;
position: fixed;
}
рд▓реЗрд╕ 2.1.1 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд▓рд┐рдирдХреНрд╕ рдЯрдХрд╕рд╛рд▓ 17 рдХрд┐рдпрд╛рдирд╛ рдкрд░ рдЪрд▓ рд░рд╣рд╛ рд╣реИред
@gpv-рджреЗрд╡
рдпрджрд┐ рдЖрдк w/o --strict-math=on
рд╡рд┐рдХрд▓реНрдк рд╕рдВрдХрд▓рд┐рдд рдХрд░рддреЗ рд╣реИрдВ рддреЛ рдЖрдкрдХрд╛ рдкрд░рд┐рдгрд╛рдо рдЕрдкреЗрдХреНрд╖рд┐рдд рд╣реИред рджреНрд╡рд╛рд░рд╛ рдЕрдм рдЗрд╕ рддрд░рд╣ рдХреЗ рдмрдпрд╛рди (рдПрдХ рдпрд╛ рджреЛ рдЕрдкрд╡рд╛рджреЛрдВ рдХреЛ рдЫреЛрдбрд╝рдХрд░, рдЬреИрд╕реЗ рдХреЗ рд╕рд╛рде рдХреЗ рд▓рд┐рдП font
рд╕рдВрдкрддреНрддрд┐) рдЖрдк рдпрд╛ рддреЛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП --strict-math=on
рдпрд╛ рдХреБрдЫ рдХреЗ рд▓рд┐рдП рднрд╛рдЧрдиреЗ рдбрд╛рд▓ /
, рдЬреИрд╕реЗ: ~"0/100%"
ред
@ рд╕рд╛рдд-рдЪрд░рдг-рдЕрдзрд┐рдХрддрдо
рд╢реАрдШреНрд░ рдЬрд╡рд╛рдм рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдзреНрдиреНрдпрд╡рд╛рджред рдЖрдкрдХрд╛ рд╕реБрдЭрд╛рд╡ рд╡рд╣реА рдерд╛ рдЬреЛ рдореБрдЭреЗ рдЪрд╛рд╣рд┐рдП рдерд╛ред
рдзрдиреНрдпрд╡рд╛рдж @ рд╕рд╛рдд-рдЪрд░рдг-рдЕрдзрд┐рдХрддрдо, рдпрд╣ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ:
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
@gpv-рджреЗрд╡
рдпрджрд┐ рдЖрдк w/o
--strict-math=on
рд╡рд┐рдХрд▓реНрдк рд╕рдВрдХрд▓рд┐рдд рдХрд░рддреЗ рд╣реИрдВ рддреЛ рдЖрдкрдХрд╛ рдкрд░рд┐рдгрд╛рдо рдЕрдкреЗрдХреНрд╖рд┐рдд рд╣реИред рджреНрд╡рд╛рд░рд╛ рдЕрдм рдЗрд╕ рддрд░рд╣ рдХреЗ рдмрдпрд╛рди (рдПрдХ рдпрд╛ рджреЛ рдЕрдкрд╡рд╛рджреЛрдВ рдХреЛ рдЫреЛрдбрд╝рдХрд░, рдЬреИрд╕реЗ рдХреЗ рд╕рд╛рде рдХреЗ рд▓рд┐рдПfont
рд╕рдВрдкрддреНрддрд┐) рдЖрдк рдпрд╛ рддреЛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП--strict-math=on
рдпрд╛ рдХреБрдЫ рдХреЗ рд▓рд┐рдП рднрд╛рдЧрдиреЗ рдбрд╛рд▓/
, рдЬреИрд╕реЗ:~"0/100%"
ред