How to make a full width image with fixed height in bootstrap?
Tags: html,css,twitter-bootstrap
Problem :
I need to make a full width image with fixed height. So I write the following code in html
<div class="marquee">
<div class="row">
<div class="col-lg-12">
<img class="img-marquee" src="img/image1.jpg" alt="image 1">
</div>
<div class="col-lg-12">
<img class="img-marquee" src="img/image2.jpg" alt="image 2">
</div>
</div>
</div>
in CSS I write the following code
.marquee {
height: 75vh;
}
.img-marquee {
max-width: 100%;
}
The result is full width image but not with the same height of the marquee which is 75vh. so my question how to do that in css by using bootstrap framework?
Solution :
try with :
.img-marquee {
width: 100%;
}
CSS Howto..
Use javascript console or firebug or something like that and it's really easy to get a website styles. CSS a { background-size: 200.22% auto; -webkit-background-size: 200.22% auto; -moz-background-size: 200.22% auto;...
Why don't you reduce the document width and height by some values? (50 and 100 are just random numbers but you can fix them with the exact size of the...
The grid is designed to have gutters on the left and right sides. If you don't want to do that, you need to use alpha and omega classes. However, they...
Try adding left: -5px to compensate for the 5px border as in the below: .dropdown { border: 5px solid red; position: relative; display: inline-block; background-color: #ffcccc; box-sizing: border-box; } .dropdown-content...
To add or remove a CSS class, you can use the selection.classed function: // Select all elements with the node class d3.selectAll(".node") .classed("selectedNode", true) // Add the selectedNode class to...
go-back buttons were causing the conflicts. In order to solve the conflict: //submenu items - go back link $('.go-back').on('click', function(){ $(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').addClass('is-hidden').parent('li').parent('ul').removeClass('moves-out'); });...
For modern browsers you could use CSS tranforms (for IE that would be 9 and above) so you make a box with top/right border and rotate it 45 degrees. This...
with 2 image , you can do something at low cost with CSS animation: @keyframes cf { 50% {/* at 50%, it avoids alternate mode */ opacity: 0; } }...
I'm one of the devs from the site you linked to, Fixate. Currently, some implementation of jQuery will be the best choice. This is a tricky problem to solve -...
jsBin demo I would do it using an absolute positioned DIV overlaying the body. Fade in the DIV with a new image, then set the same image to body and...
Where you have this line: var ib = self.name.length; You should be doing this: var ib = self.name().length; This seems to be working just fine when I test it in...
A css solution: DEMO This solution uses transform: scaleY(-1) on both the UL and the LIs. First, the entire UL is flipped, then each LI is flipped again. A double...
If your bundling your scripts and css then assets like images may not be found. In your BundleConfig.cs file, create your bundle with CssRewriteUrlTransform: bundles.Add(new StyleBundle("~/Content/css/bootstrap").Include("~/Content/bootstrap.min.css", new CssRewriteUrlTransform())); Include in...
Right well I managed to get the thing working. I do believe that there is an issue with the bootstrap download or at the very least the wording on the...
With this code i solved the problem: /* ----------- iPhone 4 and 4S ----------- */ /* Portrait */ @media only screen and (max-device-height: 480px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)...
You can try like this - * { box-sizing: border-box; } .container { position: relative; height: 256px; width: 256px; } .inner { float: left; margin-right: 16px; border: solid 1px red;...
Well you could use CSS pointer-events which will stop all mouse events working, which includes :hover. CSS div:hover { background-color:black; /* will not happen */ } div { pointer-events: none;...
Try to modify your container div from this : #container { width: 960px; margin: 20px auto;} to this : #container { width: 960px; margin: 20px auto; position: absolute; left:...
First of all, for bootstrap form-control class to work on select you must add it to select tag itself Per apidoc of rails form select select(object, method, choices = nil,...
This would be with using javascript and jQuery: CSS body { background: url("Background 1"); } #div1 { background: url("Background 2"); } #child1 { background: url("Background 1"); } JS $(function() {...
Updated Sept. 1st, 2014 In modern browsers, flex-box is the preferred method of doing this. It's as simple as: ul { display: flex; } See a JSFiddle here. For legacy...
I managed to do this in the end so putting the code here in case anyone else needs it. *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }...
This is what I found out: You can use position: fixed and top: 0 or bottom: 0 to position an element in top/bottom of each page. However, since fixed positioning...
OK so here is your website's code revisited : <!DOCTYPE html> <html lang="en"> <head> <title>گالری کاکتوس</title> <meta charset="utf-8"> <style type="text/css"> html, body { height: 100%; } body { background-image:...
Such is life -- as soon as I complain, the next thing I try works. I kept the above code and only changed the jQuery Mobile import to point to...
$css = $logged_in ? 'success' : 'dummy-undefined-css-value'; echo "<h1 class=\"$css\">My Title</h1>"; ...
Remove the position: relative; properties or add it to the container as well. Then actually use float: right; on div1 and div3 and remove the right/left properties: .container { width:...
Check out this DEMO, it should help you for sure. <nav id="main-nav"> <ul id="nav-primary"> <li><a href="#">Menu 1</a> <ul class="subnav"> <li><a href="#">beans</a> </li> <li><a href="#">pork chop</a> </li> </ul> </li> </nav>...
Looks like you could do this - var content = $(".content"); // Cache the height in variables, no need to access DOM again and again var screenHeight = $(window).height(); var...
document.querySelector(':after, :before'); ...