I want to make a responsive background image of a div which has an img wrapped inside:
Something like this:
I am using bootstrap.
Here is the HTML:
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-10">
<div class="device-laptop">
<img src="img/test.jpg"/>
</div>
</div>
and here is the css:
device-laptop{
background: url('../img/macpro.jpg') no-repeat;
width: 363px;
height: 208px;
padding: 12px 45px 23px 43px;
background-size:100%;
}
.device-laptop img{
width: 274px;
height: 172px;
}
This is the normal form. Now i want to make this responsive so when the background image is changed, the image inside to change also. Is there anyway to achieve this?
I tried:
.device-laptop{
background: url('../img/macpro.jpg') no-repeat;
/*width: 363px;*/
background-size:100%;
height: 208px;
}
this makes the background image be responsive but how can i make also the image go parallel with the background one?
Thnx
Edit: Odd, From the provided css, it appears that .device-laptop is having a fixed width and height. Not sure how it will be fluid then?
Anyway, Utilizing background-size:contain option mentioned by #papa
.. If you're ok with altering your markup. Below will do the job.
Fiddle: http://jsfiddle.net/Varinder/wf3U8/1/
HTML
<div class="some-awesome-laptop">
<div class="some-awesome-wallpaper-wrapper">
<img src="http://placehold.it/250x150&text=text" class="some-awesome-wallpaper" />
</div>
</div>
CSS
.some-awesome-laptop {
background-image:url("http://placehold.it/270x180/aaa&text=a");
background-repeat:no-repeat;
width:270px;
max-width:100%;
margin:0 auto;
height:0;
overflow:hidden;
padding-bottom:66%; /* aspect ratio of the image: (180/270)*100 */
position:relative;
-webkit-background-size:contain;
-moz-background-size:contain;
background-size:contain;
}
.some-awesome-wallpaper-wrapper {
padding:10px;
}
.some-awesome-wallpaper {
max-width:100%;
display:block;
}
Use background-size:cover or background-size:contain to suite your needs. Cover might be the better option.
Related
For some reason, my website does not want to display the background-image which I have set on my div.
I want to have a featured image that display's across the whole page (kind of like on Microsoft's homepage). However, the image doesn't want to show.
I have tried disabling AdBlock and any other extensions with no avail, I have also tried to look on forums to see if I could find anything (which I haven't).
The following is my HTML:
<body>
<div class="container">
<div class="content">
<div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">
</div>
</div>
</div>
</body>
And my 'relevant' CSS:
.container {
left:15%;
width:70%;
margin:0px auto;
}
.content {
background-color: #FFF;
border: 1px solid #F2F2F2;
padding-bottom:100px;
padding:40px;
width:90%;
margin:0px auto;
padding-top:100px;
}
.featured-img-display{
width: 100%;
height: 100%;
opacity: 1;
background-image: url('/data/img/game_data/19a017f91q.jpg');
background-size: cover;
background-repeat: no-repeat;
}
Thanks
Fiddle: https://jsfiddle.net/ses3j1Ld/
Currently, the featured-img-display element has no height. That's why you don't see the background image.
height: 100%; will only set full screen height on an element if its parent actually has 100% screen height as well.
To do this using % units you'll need to make sure that all elements up to the featured-img-display element have 100% height,.. something like:
html,body,.container,.content {
height: 100%
}
Then your current CSS code will work. Sometimes however the above code isn't so viable.
Using viewport units here: height: 100vh; makes things a lot easier
Note:
If you want the image to span the full screen height (and without scroll-bars), you'll have to adjust your CSS a bit:
1) remove default margin with body { margin:0 }
2) You have set padding and a border on the parent of the element with the background image... you'll probably want to set these properties on the image element itself with box-sizing set to border-box.
Codepen demo
the height of .featured-img is percentage value for make it work the parent's height must be determined and the only exception is the root element html, which can be a percentage height.
body, html{
height: 100%;
width: 100%;
}
.container {
left:15%;
width:70%;
height: 100%;
margin:0px auto;
}
.content {
background-color: #FFF;
border: 1px solid #F2F2F2;
padding-bottom:100px;
padding:40px;
width:90%;
height: 100%;
margin:0px auto;
padding-top:100px;
}
.featured-img-display{
width: 100%;
height: 100%;
opacity: 1;
background-image: url('http://i.imgur.com/IMiabf0.jpg');
background-size: cover;
background-repeat: no-repeat;
}
<body>
<div class="container">
<div class="content">
<div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">
</div>
</div>
</div>
</body>
Instead of div, can you try with img tag as well. I think that might work
Well, all your divs .container, .content, and .featured-img-display don't have a height. height:100% means having height equal to the element's parent but since none of those elements have any height, height: 100% equates to 0px. Same goes for width.
So, one of the divs will have to have a specific height and width. Here's an example.:
I've created an image using GIMP and have imported it into a website I am creating. For some reason it does not want to center when I resize the browser. In addition, unless I set it's position to absolute, it moves to the middle of the page( I want center, top). I believe it has something to do with the size of the image. It is 1920x1080 and I used this size because of the quality, but I think the background is getting used when I import it. I've tried everything in Gimp to cut out the background. Any suggestion on the code or how to fix this in GIMP it would be great.
<div id="logo">
<img src="DTW Logo\DTW2_Logo_ColombianFlagColorTOPcropped.png" >
</div>
body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#logo{
margin: -368px 450px 0px 0px;
position: absolute;
width: 100%;
}
Use css width property in percentage measurement, and margin set auto on both side left and right,
CSS
#logo{
margin:0px auto;
top:0px;
width:100%;
text-align: center;
}
View this demo jsFiddle
Set image width on percentage:
img{
width: 15%;
/*width: 75px */
}
View jsFiddle
hope you are looking like this
HTML
<div id="logo">
<img src="http://aoyouth.org.uk/wp-content/uploads/2012/12/home-icon.png">
</div>
CSS
img{
max-width:100%;
}
#logo {
width: 100px;
margin:0 auto;
position:absolute;
left:0; right:0; top:50%;
}
Fiddle Demo
Here is a JSFiddle to show what I mean: http://jsfiddle.net/p4toy2qq/.
The Code is here:
HTML
<div class="container">
<img src="image-of-any-size.jpg" alt="alt" />
</div>
CSS
.container { width: 100px; height: 100px; overflow: hidden; border: black solid 1px; margin: 10px;}
.container img { width: 100%; }
I basically want different sized images to fill out the divs, without the aspect ratio getting messed up. The overflow should be hidden, so the parts outside get 'cropped' off.
Any ideas?
If you have the option to set them as background images you can use:
.container{
background: url('something.jpg');
background-size:cover;
background-position:center center;
}
Note that some older browsers don't support background-size: http://caniuse.com/#search=background-size
there's a method to do this.
.img-container{
position:relative;
width:100px;
height:100px;
display:block;
overflow:hidden;
text-align:center;
}
horizontal img
.img-container > img{
position:absolute;
top:0;
height:100%;
}
vertical img
.img-container > img{
position:absolute;
top:0;
width:100%;
}
demo
If you want to cover the height of the images inside the container, use background-image: auto 100% style instead of img tag and apply the image to the .container element directly.
Working Fiddle
Note: This solution is assuming that all your images have more than 100px of height as you have shown in the fiddle.
Update:
If you want to just cover the image completely inside the container then you can use background-image: cover
Working Fiddle
You could use the new object-fit property (currently webkit only)
1) Set object-fit: cover; on the image to ensure that the aspect ratio is kept, and
2) Set height: 100px to fill the box if the image is < 100px high.
FIDDLE
.container {
width: 100px;
height: 100px;
overflow: hidden;
border: black solid 1px;
margin: 10px;
}
.container img {
width: 100%;
object-fit: cover;
height: 100px;
}
<div class="container">
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="alt" />
</div>
<div class="container">
<img src="http://chennaionline.com/images/gallery/2013/June/20110623010938/Singam2_Suriya_Stills_Photos_Images_10.jpg" alt="alt" />
</div>
<div class="container">
<img src="http://www.moviehdwallpapers.com/wp-content/uploads/2014/10/happy_diwali__sms_images_.jpg" alt="alt" />
</div>
You can read more about this new property in this webplatform article.
From the above article - regarding the 'cover' value:
The whole image is scaled down or expanded till it fills the box
completely, the aspect ratio is maintained. This normally results in
only part of the image being visible.
Also, here is a fiddle from the above article which demonstrates all the values of the object-fit property.
I'd like to create a round image from a rectangular image using radius-border.
Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.
See failed attempts here:
http://jsfiddle.net/v8g3y0na/
.rounded-corners-2{
border-radius: 100px;
height: 150px;
width: 150px;
Can this be done in only CSS.....?
You do that by adding a parent div to your img and the code flows as follows
figure{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
}
Updated Demo
Round image using CSS object-fit and border radius:
img{
width:80px;
height:80px;
border-radius: 50%;
object-fit: cover;
}
<img src="https://picsum.photos/id/1011/800/400">
img with background image
For older browsers, using the <img> tag
<img alt="My image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
style="background: url(https://picsum.photos/id/1011/300/180) 50% / cover;
border-radius: 50%;
width:150px;">
The trick is to set a transparent px for the src (to prevent broken image icon) and do the best CSS3 and background-size has to offer (cover).
Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.
Yes, and you can also avoid using parent elements by just setting the image as the background. You can also position the image as you wish by using the background-position attribute.
Updated to address concerns about size, roundness, skewing and dynamically loaded content.
setTimeout(function() {
$("#image").css("background-image", "url(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)");
}, 3000);
#image {
display: block;
background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
border-radius: 200px;
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />
http://jsfiddle.net/o8fwpug5/37/
This is a slight update of a previous answer. I liked the other answer, but this is a bit more streamlined and gives a pixel based width for the wrapper. This way it is easier to see and change the dimensions for your own purposes.
HTML:
<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>
CSS:
div{
height:200px;
width:200px;
position:relative;
border-radius:100%;
overflow:hidden;
}
img{
position:absolute;
left:-50%; right:-50%; top:0;
margin:auto;
height:100%; width:auto;
}
Put a DIV frame around the image: DEMO
<div class="rounded-corners">
<img src="http://welovekaleycuoco.com/wp-content/uploads/2013/11/Kaley-Cuoco-Wallpapers-81.jpg" width="200">
</div>
div.rounded-corners {
height: 150px;
width: 150px;
border-radius: 50%;
overflow: hidden;
}
note: you don't need your img.rounded-corners style anymore
This is my code:
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
<img src"myimg.png"/>
</div>
I want to crop from left and right my image in this div.
But it only crop a part from right.
I want to do something like this (which works in IE 8-10 too).
Thanks in advance!!!
You can keep your HTML as is and make the image's position:relative and the position left:-50% (or margin-left:-50%).
Your HTML:
<div id="cropper">
<img src="http://lorempixel.com/output/sports-q-c-900-600-3.jpg" />
</div>
Your CSS:
#cropper{
width:450px;
height:600px;
overflow:hidden;
}
img{
position:relative;
left:-50%;
}
Here's the demo.
EDIT
To accurately center the image in any div size, you need to position the image in pixels and not in percentage unless the container is exactly half the size of the image. So the final CSS of an image size of 900x600 pixels would be:
img{
position:relative;
left:-450px;
}
You can use clip-path to crop pretty much anything:
.crop-left {
clip-path: inset(0 50px 0 0);
}
.crop-right {
clip-path: inset(0 0 0 50px);
}
.crop-top {
clip-path: inset(0 0 50px 0);
}
.crop-bottom {
clip-path: inset(50px 0 0 0);
}
Why not set the image as background?
HTML
<div id="mydiv" style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
</div>
CSS
#mydiv
{
background-image:url('myimg.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Here this is s small trick to crop a div...
put the div you want to crop inside another div..
set overflow of outer div to hidden
them simply shift the inner div as you want to crop it using margin_left,right,top,down attributes...
<div style="overflow:hidden;">
<div id="myDiv" style="overflow:hidden;margin-top:-30px"></div>
</div>
Simple :)
What you want is not possible with an <img>. However, you can use the "CSS Sprite" trick:
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;
background: url(myimg.png) no-repeat center center">
</div>
No jsFiddle, sorry, as I don't have your image.
here's a solution proposed a few times here for similar questions:http://codepen.io/gcyrillus/pen/BdtEj
/* see demo : http://codepen.io/gcyrillus/pen/BdtEj , to play with and understand */
parent {
line-height:equals to height;
text-align:center;
}
parent img {
vertical-align:middle;
margin:-100%;
}
It's about clipping your image.You have that old and usefull CSS rule : clip:rect();
http://www.w3.org/wiki/CSS/Properties/clip wich has this purpose.
Or using a trick (cause you enjoy to play with CSS) to reduce virtually image zize to null, so it centers horizontally and vertically no matters it's real size.
http://codepen.io/gcyrillus/pen/BdtEj
You can just set a background image to the div
HTML
<div class='myDiv'></div>
CSS
.myDiv {
width: 75px;
height: 75px;
background: url('myimg.jpg') no-repeat -123px 0px;
}
Adjust -123px to the correct left offset from where cropping should start.
EDIT: jsFiddle
There are more possible solutions for this:
Using a container div and applying negative positioning on the image. Or you can set the image as the background of div which makes you able to use background-position for example.
Below is the DEMO link as per your requirement, which work in ie.
<div class="mainDiv">
<div class="green"></div>
</div>
.mainDiv {
margin:0 auto;
border:1px solid #000;
width:700px;
height:500px;
text-align:center;
}
.mainDiv .green {
width:100px;
height:100px;
background-color:red;
display:inline-block;
}
It's possible with image and any element, css positioning, provided that you know the width of the image.
Add position:relative to the div, and position:absolute on the image together with half the width of the image in a left:-204px;top:0;.
Example fiddle: http://jsfiddle.net/ctXcJ/2/
try margin: 0 auto; instead of text-align.