You can do this using pure CSS; no JavaScript needed. This utilizes the (somewhat counterintuitive) fact that padding-top percentages are relative to the containing block’s width. Here’s an example: .wrapper { width: 50%; /* whatever width you want */ display: inline-block; position: relative; } .wrapper:after { padding-top: 56.25%; /* 16:9 ratio */ display: block; content: … Read more
If you want the same image to scale based on the size of the browser window: background-image:url(‘../images/bg.png’); background-repeat:no-repeat; background-size:contain; background-position:center; Do not set width, height, or margins. EDIT: The previous line about not setting width, height or margin refers to OP’s original question about scaling with the window size. In other use cases, you may … Read more
2018 UPDATE Bootstrap 4 Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes: <nav class=”navbar fixed-top navbar-expand-sm”>..</nav> navbar-expand-sm = mobile menu on xs screens <576px navbar-expand-md = mobile menu on sm screens <768px navbar-expand-lg = mobile menu on md screens <992px navbar-expand-xl = mobile menu on lg screens <1200px navbar-expand = … Read more
Works on almost all browsers. You can try giving padding-bottom as a percentage. <div style=”height:0;width:20%;padding-bottom:20%;background-color:red”> <div> Content goes here </div> </div> The outer div is making a square and inner div contains the content. This solution worked for me many times. Here’s a jsfiddle
There’s another way to do this that doesn’t require redrawing the graph, and it involves modifying the viewBox and preserveAspectRatio attributes on the <svg> element: <svg id=”chart” viewBox=”0 0 960 500″ preserveAspectRatio=”xMidYMid meet”> </svg> Update 11/24/15: most modern browsers can infer the aspect ratio of SVG elements from the viewBox, so you may not need … Read more
Bootstrap v3 & v4 Use btn-block class on your button/element Bootstrap v2 Use input-block-level class on your button/element
New visible classes added to Bootstrap Extra small devices Phones (<768px) (Class names : .visible-xs-block, hidden-xs) Small devices Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm) Medium devices Desktops (≥992px) (Class names : .visible-md-block, hidden-md) Large devices Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg) For more information : http://getbootstrap.com/css/#responsive-utilities Below is deprecated as of v3.2.0 Extra … Read more
Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it’s not useful. The image has a display:none style but its size may be read by the script. Chrome v68.0 does not load images if the parent is hidden. You may check it there : … Read more
When you decide between fixed width and fluid width you need to think in terms of your ENTIRE page. Generally, you want to pick one or the other, but not both. The examples you listed in your question are, in-fact, in the same fixed-width page. In other words, the Scaffolding page is using a fixed-width … Read more
You can use the viewport value instead of ems, pxs, or pts: 1vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; } … Read more