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.
Related
I have an banner image that is 1920 x 1300 which I want to display within a container or jumbotron which is 800px height.
How can i fit the image in so that it is also responsive and so is the text ontop of it?
<div class="container-fluid>
<div class="image-container">
<h1>Title</h1>
</div>
</div>
CSS:
.image-container{
background-image: url("..images/background.jpg");
background-size: contain;
height:800px;
width: 100%;
}
Or would it be a better idea to re-size the image?
I would suggest to use an html <img> instead of an css background.
I've made an JSFiddle of how I would do that.
Set the inner content inside the <div class="image-container"> and set it absolute.
Here is the JSFiddle.
with Bosstrap3/.
I have 2 image. One image is big. another is small.
both of image are responsive.
I want put small image on big image.
It's easy for a static page. But I want do it for a responsive page.
I want position of images not be change with resize of page.
I try this:
<div class="container">
<div class=" panel panel-default">
<div class="panel-body" style="padding:1px">
<img class="img-responsive" src="http://placehold.it/1170x300" alt="Chania">
</div>
<div class="panel-footer">
View all <h4>Bootply Editor & Code Library</h4>
</div>
</div>
</div>
<img class="img-responsive mytumb" src="http://placehold.it/150x150/000">
AND css code:
.mytumb{
position:absolute;
top:50px;
left:40px;
}
But it works for an static page.
How can I do it?
https://jsfiddle.net/DTcHh/18935/
You can go here for a solution position one image above another , you will surely get a solution. Happy Coding!
You can add your image inside your .container div so it is in absolute position relative to this container.
Like this
And then, play with media queries to make it fits everytime.
.container { position: relative; }
#media (max-width: 767px){
.img-responsive.mytumb { width: 20%}
}
It is not perfect but you've got the idea I suppose.
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'm working on a website project where in the header section I have a grid of 6 images (2 rows with 3 images in each). It's not a problem to make them responsive (kinda "liquid") with max-width:100% and height:auto, however this website should be linked with some admin tool in the future, so the end user(s) could upload their own images.
Hence, I need to understand how keep these two rows of images responsive but at the same time give them a fixed height (in this case they should be 220px). When I crop the images and make them all equal in height (using Photoshop), everything works fine, but as soon as I use images with different height values, the grid starts to break. Is there any known workaround for this?
Thanks in advance!
Use percents and #media
Example :
#media only screen and (min-width : 320px) {
img {
width:40%;
height:60%; /*Images should be bigger in small devices*/
}
}
#media only screen and (min-width : 480px) {
img {
width:30%;
height:55%;
}
}
Please Note : The percent is calculated from parent. For example if you put an image in a div with width : 400px and height : 300px, it will show the image with 160px width and 180px height on device with min-height of 320px.
max-height is another choice.
Well, let's see if I understood good enough your question (my bad english, not yours).
If yoy want 2 rows, 220px height each with 3 images each filling the width of the row while keeping the same height as the parent, the problem you may have is that the images will distort to adapt to their responsive parent container.
This may not work for you as even if your images are simillar in aspect ratio (height x width) once the window width is small (responsive) they will get distorted too much.
Here is an example: I've use different sizes images some horizontal and some vertical so it can be easier to understand.
Basic html:
<div class="header">
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
</div>
Please notice that the row is 240px insteed of 220 just so you can see easily the row (with red background) and I add for the same reason a white border to the image containers.
FIDDLE
The option I would try though is to make the images fit into the container without distortion, they will fit in height OR in width, but of course, they will leave space at the sides if it fit height or on top and bottom if fit in width but at least the images will be always centered in the container:
the green color is the background of the images container:
FIDDLE
There may be better options but without the help of jquery I can't help you more
If your goal is to keep the images (or their container's) height fixed, that will mean that the images will not be stretching or contracting in a fluid way. Given that this concept is contradictory in practice, I will instead show you a 'responsive' solution that comes from making container elements themselves responsive rather than instead of the images.
The case you're referring to (2 rows 3 images) sounds like a great place to implement a cascading images look-and-feel. When the page width shrinks the images will float under each other whereas viceversa when the website width is stretched; this in essence achieves a fluid and responsive functionality without affecting the image heights themselves. The below code should apply the 'building blocks' you'll be needing for in order to achieve this effect... granted there is a lot of custom work you can do here (like using background: cover, instead of img tags as suggested in the comments). Take a look and let me know if this helps you get closer to what you're trying to achieve.
HTML
<div class="wrapper bg-purple center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
<div class="clear-both"></div>
<div class="wrapper bg-cyan center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
CSS
.wrapper {
display: table;
}
.img-container {
height: 50px;
padding: 2px;
}
.center-div {
margin: 0 auto;
}
.left {
float: left;
}
.clear-both {
clear: both;
}
.bg-purple {
background-color: purple;
}
.bg-cyan {
background-color: cyan;
}
#media only screen and (max-width: 450px) {
.left {
clear: both;
}
}
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