html - Scaling images to 16:9 aspect ratio -
I have a background image which is scaling,
but the problem is increasing Looking at the small proposals, the tricks are seen.
.bcg {background-position: center center; Repeat Background: No Repetition; Background-attachment: fixed; Background size: cover; Height: 100%; Width: 100%; } / * Slide1 * / # slide -1 .BCG {background-image: url ('../ img / bcg_slide-1.png'); Background-size: 100% 100%}
HTML markup
& lt; Section id = "slide-1" class = "homeSlide" & gt; & Lt; Div class = "BCG" & gt; & Lt; Div class = "hsContainer" & gt; & Lt; Div class = "hsContent" & gt; & Lt; H2 & gt; Hello1 & lt; / H2 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Section & gt;
If I background-size: 100% auto;
, then its the entire window is not fully fit
. Resolutions
and Size
Remove the background-size from your slide, and the background-size of the .bcg class: cover
work. The wrapper aspect ratio will be maintained, and the size of the image will change, so it can be minimized while covering the entire area. involved
works equally, but its shape changes, so a dimension covers the whole area.
Comments
Post a Comment