Anyone knows the max-width size of COL-MD-3 GRID in bootstrap 3?
I have an image thumbnail. I want to do is to get the max-width pixel size of the Col-md-3 grid.
I have a style div here I use width:100%; so it will fill the max-width of the col-md-3 but the problem is the height:?; because I want to copy the 100% width converted pixel so I will paste into height.
example: width:200px; height:200px; Like this but I can get what the max-width pixel size of col-md-3?
<div class="row">
<div class="col-md-3">
<div class="row" style="width:100%;
height:222px;
background:#000 url('sample.jpg');
background-attachment: scroll;
background-position:center -10px;
background-size:150% auto;
background-repeat:no-repeat; ">
</div>
</div>
</div>
Thank you for helping.
Related
I have first div generated dynamically and second div I have placed it.
First div image is taking 200X200 by dynamically. Same size image i want to set it through css in second div.
But when I tried to set it and it's not taking full height 200 of the image.
If i mention min-height it's not coming properly for all resolutions. I don't want to specify min-height for the media queries.
How to set background image height automatically?
First Div structure
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="product-thumb transition">
<div class="image"><img src="../image/cache/catalog/savouries/karasevu-200x200.jpg" alt="Karasevu" title="Karasevu" class="img-responsive"></div>
<div class="caption">
<h4>Karasevu</h4>
<p class="price"> $0.00 </p>
</div>
<div class="button-group home-btn">
<button class="producthome-btn" type="button" onClick="cart.add('71');"><i class="fa fa-shopping-cart cart-icon"></i> <span class="">Add to Cart</span></button>
</div>
</div>
</div>
Second Div structure
<div class="more-link product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="a-more-link"> VIEW MORE </div>
</div>
Use the background-size property.
.someClass {
background-image: url(someImage.jpg);
background-size: cover;
}
First method use background-size to 100%
.classname {
background-image: url(img.png);
background-size: 100%;
}
Second method use background-size to cover
.classname {
background-image: url(img.png);
background-size: cover;
}
Try using background-size:cover and you can center it by using background-position:center
Set your body element to 100% like this:
body{
height: 100%;
}
then use inherit or set your bg height to 100% like this:
.yourParentDiv{
height: 100%;
// your other code here
}
So what im trying to do is to center text div vertically and spread it to window size so that is responsive for all sizes. This is my fiddle: https://jsfiddle.net/2b1wm0pv/
<div class="container">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="error-number">404</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="error-small-title">ERROR 404!</div>
<div class="error-big-title">Oooops, an error has occured!</div>
<div class="error-description">We are sorry but the page you are looking for is not available anymore or you have entered the wrong address.</div>
<div class="col-md-5 col-sm-5 col-xs-5">
<div class="row">
<div class="error-button">
RETURN TO HOMEPAGE
</div>
</div>
</div>
</div>
</div>
</div>
To center the text, set the following CSS on the text div, or wrapping div:
.selector {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
And the following on the parent element of that div:
.selector {
position: relative;
}
Please note that the absolute positioned elements no long define the parent elements size, so it's highly recommended to define a width and height for this element.
To spread a div to it's page size u can use viewport (viewport = browser window) units: vw (width) and vh (height), where 100 is the size of the viewport, 50 will be half. This is different from using %, since % are relative to the size of the parent. So in your CSS:
.selector {
width: 100vw;
height: 100vh;
}
What I'm trying to achieve is the image outside of the parent div's boundaries, which works in 1280x1024. How can I make this effect responsive?
Html:
<div class='row'>
<div class="divider">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
<img src="http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/responsive.png" alt="laptop tablet phone responsive"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
<h1>bla bla bla.</h1>
</div>
</div>
</div>
CSS:
.divider{
margin-top:100px;
min-height:175px;
margin-bottom:100px;
background-size: cover!important;
background-attachment: scroll;
background-image: url('http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/triangles.svg');
}
.divider div{
top:-50px;
The following image show's my problem, with the top half being the desired effect. And the bottom half is what happens when resizing the screen to smaller resolutions.
The problem seems to be that the image is resizing itself but the parent div is not, in this case I would change the values in pixels to values in vh and vw (these are percentages of "viewport height" and "veiwport width": the height and width of the window you are resizing.) for example:
margin-top:100px;
would become
margin-top:8vh;
By placing both the background image and the front image in HTML, and adding the following css rules they both scale the same.
.divider div{
top:-50px; // placing the image slightly above the divider div
height:125%; // making the div containing the image bigger than the divider div
}
.divider img{
width:100%; // just for this image because it isnt wide enough
position:absolute; // make sure the image listens to top:-50px;
}
ps: the images scale because of twitter bootstrap's css:
img {
height: auto;
max-width: 100%;
}
I have an image which its size is 1050x700. I would place it in full screen when it is in desktop. the idea would be to place it when is in desktop version under the black bar in this way the image remain almost the same.
here it is the jsfiddle example http://jsfiddle.net/qLdp4czn/1/
in the mobile there is no problem because it fit the device display so it should back normal without placing it under the bar
here is the code:
<div class="container-fluid top-bar">
<div class="row-top">
<div id="central-block" class="text-center">
<p>Title</p>
</div>
</div>
</div>
<div class="img-background">
<img src="http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg" alt="animal" class="img-responsive">
</div>
Put the image as a background-image instead and remove the img element:
.img-background {
background-image:url(http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg);
background-repeat:no-repeat;
background-size:100% auto;
position:relative;
width:100%;
height:100%;
}
You might have to set the width and height of the element depending on your other CSS.
I have a typical bootstrap layout like this
<body>
<div class="container">
...
</div>
<div class="container">
...
</div>
</body>
but I want to do this
<body>
<div class="bg-img">
<div class="container">
...
</div>
<div class="container">
...
</div>
</div>
</body>
The basic background color will be a soilid color but I want a background image for the main content. I would like the background image to scale appropriately with the responsive aspect of the framework.
I basically want to know if this is advisable?
Use just one container and then you can nest your rows into it.
html:
<div class="container">
<div class="row bg-img">
<div class="col-xs3">...</div>
<div class="col-xs3">...</div>
<div class="col-xs3">...</div>
</div>
<div class="row bg-img2">
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
</div>
css:
.bg-img {
background-image:url('http://placehold.it/200x200');
background-repeat:repeat-x;
background-size: 100%;
}
.bg-img2 {
background-image:url('http://placehold.it/200x200/fc43c');
background-repeat:repeat-x;
background-size: 100%;
}
http://jsfiddle.net/8y9Hr/3
By "scale appropriately", I suppose you mean you have an image of e.g. 1000px wide, and if the window is narrower than 1000px, you want the image to shrink to fit the width of the window.
You can use the CSS background-size property, however this won't work in IE8 and below.
Example which resizes the background image to fit the width of the screen, where image height is calculated automatically while maintaining proportions:
.bg-img {
background: #f00 url('image.png') no-repeat center top;
background-size: 100% auto;
}
You can use media queries to set a different size image to avoid e.g. mobile devices loading a 2000px wide image and resizing it.
Reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp