CSS3์ ์๋ก์ด background-size
์์ฑ์ ๋ค์๊ณผ ๊ฐ์ด background-position
์ฌ์๊ณผ background
์๊ธฐ ์ ์ธ์ ํฌํจ๋ ์ ์์ต๋๋ค.
div {
background: url('/path/to/image.png') left center / contain no-repeat;
}
๊ทธ ๊ฒฐ๊ณผ ๊ตฌ๋ฌธ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค. ๊ตฌ๋ฌธ ๋ถ์๊ธฐ๊ฐ / contain
๋ถ๋ถ์์ ๋ถ๋ช
ํ ์ง์ํฉ๋๋ค. ์ ๊ฑฐํ๋ฉด ์ค๋ฅ๋ ์ฌ๋ผ์ง๋๋ค.
๋ฌผ๋ก ~"โฆ"
background
์์ฑ์ ์ ์ฒด ๊ฐ์ ์ด์ค์ผ์ดํํ์ฌ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ง๋ง ์ ํ์์ด ๊ธฐ๋ณธ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ ์ ์์ผ๋ฉด ์ ๋ง ์ข์ ๊ฒ์
๋๋ค.
PR # 915์ ํ์ ์ฌ๋ก์ฒ๋ผ ๋ณด์ด์ง๋ง ํ๋์ ์์์ด ์์์ต๋๋ค ...
๋ค, ์ ํํ ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ 1.4.0์์์ ๊ฒ์ ๋๋ค. @dmcass ๊ฐ ๋๋ด์ง ์์ผ๋ฉด # 915๋ฅผ
๋ง์คํฐ์ ๊ณ ์
lessc 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;
}
lessc 2.1.1์ ์ฌ์ฉํ์ฌ Linux Mint 17 Qiana์์ ์คํ ์ค์ ๋๋ค.
@ gpv-dev
--strict-math=on
์ต์
์์ด ์ปดํ์ผํ๋ฉด ๊ฒฐ๊ณผ๊ฐ ์์๋ฉ๋๋ค. ์ผ๋ก ์ง๊ธ (์ : ํ๋ ๋๋ ๋ ๊ฐ์ ์์ธ์ ๊ฐ์ ๋ฌธ์ ๋ํด font
๋น์ ์ด ์ค ํ๋๋ฅผ ์ฌ์ฉํด์ผํ๋ ์์ฑ) --strict-math=on
๋๋ ์ผ๋ถ ํ์ถ ๋ฃ์ด /
, ์ : ~"0/100%"
.
@ seven-phases-max
๋น ๋ฅธ ์๋ต ๊ฐ์ฌํฉ๋๋ค. ๋น์ ์ ์ ์์ ์ ํํ ๋ด๊ฐ ํ์ํ๋ ๊ฒ์ ๋๋ค.
@ seven-phases-max์๊ฒ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
@ gpv-dev
--strict-math=on
์ต์ ์์ด ์ปดํ์ผํ๋ฉด ๊ฒฐ๊ณผ๊ฐ ์์๋ฉ๋๋ค. ์ผ๋ก ์ง๊ธ (์ : ํ๋ ๋๋ ๋ ๊ฐ์ ์์ธ์ ๊ฐ์ ๋ฌธ์ ๋ํดfont
๋น์ ์ด ์ค ํ๋๋ฅผ ์ฌ์ฉํด์ผํ๋ ์์ฑ)--strict-math=on
๋๋ ์ผ๋ถ ํ์ถ ๋ฃ์ด/
, ์ :~"0/100%"
.