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

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -