I trying to create a class with a dynamic image background on bootstrap3 without success. Instead use height equal to 180px i trying to use 100% to make it responsive. Whats wrong?
.audio-cover {
background: url("http://media.merchantcircle.com/22662073/180px-Smiley_svg_full.png");
background-size: contain;
background-repeat: no-repeat;
height: 100%; //instead use 180px
}
<div class="col-xs-4 col-sm-4 col-md-4 audio-cover"></div>
set your background-size to cover and specify a min-height.
check out the fiddle
there are a few ways to make an image responsive, but there are questions, do you want to keep the aspect ratio?
if you want to keep your approach of using a div and assigning background properties you can use the following css:
#image {
background-image: url(http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
this will make the div 100% height and width of the parent, but the image background-size is 100% width with auto height. This means, the height will keep its aspect ratio of the original image.
if you want the image to take the full height-width of the parent and not maintain its aspect ratio you can change background-size to:
background-size: 100% 100%;
you can play around with it here http://jsfiddle.net/1f36wedc/
The responsive idea for images is like this:
<div>
<img src="SOME_WHERE" />
</div>
div{
width: X; // depended on your logic
height: 170px;
overflow: hidden; // by this one, maybe you lost some part of image, but is okay
}
div > img{
max-width: 100%;
}
Hope this help
Related
I have an img inside a div tag, and currently I am using the CSS
img {
max-height: 100%;
max-width: 100%;
}
This currently keeps the images fitting inside the div, which is what I wanted. However, if the image file is smaller than the div, the image will not be the maximum size it can be. Is there an easy way to maximise the image, while keeping the image inside the div, and keeping the original aspect ratio?
I've tried setting the height to 100%, with a max-width of 100%, but this distorts the image, which is not what I'm looking for.
I also tried object-fit: contain;, but this doesn't seem to do anything.
Thanks :)
Try doing adding it as background, then you can do this:
div {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#Michelangelo's answer is another way to achieve your objective. If you want your image to be inside a img tag (like your original post), keep your max-width and max-height values, and put one of these inside your CSS class:
1) Keep aspect ratio based on width:
width: 300px; /* Your preferred width */
height: auto;
2) Keep aspect ratio based on height:
width: auto;
height: 300px; /* Your preferred height */
I would also suggest you to take a look at the object-fit property here:
https://www.w3schools.com/css/css3_object-fit.asp
It kinda acts as background-size property when you put values like contain or cover, with the plus that you can specify width and height without complicating your layout / DOM hierarchy. It comes very handy when dealing with intrinsic sizes of elements.
If you want to keep the image as an HTML element and not a CSS background, I would use object-fit. There are browser support limitations with this CSS property.
https://caniuse.com/#search=object-fit
You could use a polyfill to combat this. Such as:
https://github.com/fregante/object-fit-images
An example of what I believe you're after could be:
https://codepen.io/bin-man/pen/NWKNWLm
.image-container img {
object-fit: cover;
}
You can play around with the image sizes and remove object-fit to see how it behaves.
Hope this helps.
I guess this is what you need... Please run the code snippet...
div {
width: 100px;
height: 100px;
}
div > img {
max-width: 100%;
max-height: 100%;
object-fit: scale-down;
}
<div>
<img src="https://www.wellnesspetfood.com/sites/default/files/styles/blog_feature/public/media/images/6615505_950x400.jpg?itok=ylLXPrq6" />
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg" />
</div>
I am using the same image as a background image for a div on one page and as an image element on another page. They take up the same space on both pages, same width and height, but the image is not positioned the same. This is the background image html:
<div class="frontpage-bg-image-wrapper">
<div class="header-bg-image frontpage-header-hero"></div>
<div class="bg-overlay overlay"></div>
</div>
And this is its css:
.frontpage-header-image-div {
height: 100%;
.frontpage-bg-image-wrapper {
position: relative;
width: 100%;
min-height: 635px;
background-size: cover;
background: url('/wp-content/themes/sfk/assets/images/sfk-bg.png') no-repeat;
}
}
And on the other page I have a an image element:
<div class="hero-image-wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/sfk-bg.png">
<div class="overlay"></div>
</div>
And its css:
.hero-image-wrapper img{
width: auto;
height: 100%;
}
But there is the difference in the positioning of the image, I have tried with object-fit: cover, but it didn't help. This is the background:
And this is the image element:
How can I fix that?
I think your picture is smaller than container (specially in 'height');
background-size:cover will cut external picture to fit the container, however the 'img' tag will not.
First way: set the container size as same ratio as the picture ([container width] : [container height] = [image width] : [image height])
Second way : try the img tag's css with: 100% , height:auto
From what I can tell cover plus min-height is cropping your image a little bit, probably when it's stretched beyond the native resolution of the image.
I would do what they do to create responsive video, add padding-bottom as a percentage that is equal to the video's aspect ratio. If your image is 400x300 then you'd add 75% padding,
300 / 400 = 0.75 * 100 = 75%
Doing this allows the element to fill the width of it's container with the same proportions as your image.
img {
display: block;
max-width: 100%;
height: auto;
}
.container {
margin: 3rem auto;
width: 70%;
}
.bg {
position: relative;
background-image: url( 'http://lorempixel.com/800/400/city/4/' );
background-size: cover;
padding-bottom: 50%;
}
#media ( min-width: 1120px ) {
.bg {
max-width: 800px;
padding-bottom: 400px;
}
}
<div class="container">
<img src="http://lorempixel.com/800/400/city/4/">
<div class="bg"></div>
</div>
For the img element we've made it responsive. Most CSS frameworks use the three properties used on img for their responsive image class. Note that the image will not resize beyond it's native resolution.
For the div to replicate the responsive styles of the img we needed to use a media query to prevent the image from expanding beyond it's native resolution along with updating the bottom padding. If we don't change the padding bottom when we limit the images width then you end up with a div that takes up a lot more space than the background image does (creating a lot of white space below it).
Yo could try setting background-size to 'contain'
Im trying to design a home page for my website where im using a div to show an illustration.
i want to use an image with the div that covers the entire size of the div.
the image dimensions are 1920x850.
this is the code for the div
<div class="custom-col col-md-12 col-sm-12" id="widget-static-block-1"></div>
the css:
#widget-static-block-1 {
background: url({{ d_banner1.jpg' | asset_url }});
width:100%; }
i want to be able to view the image on different screen sizes , but the it always gets cut off (either height or width)
ive tried playing around with height and width attributes to no luck.
If i set height:850px; then obviously it shows perfectly on a 1080p sceen but gets cut off on a smaller screen.
One thing i want to be clear about is that i want the entire image to show at all times at all browser sizes, i dont want it to be cut off via height or width.
Try background-size: 100% 100% or background-size: 100vw 100vh. If you want to be certain your div suits every media you can use vw and vh units.
It seems like you're asking for the div to fill the parent (height or width). And if you don't want the background image to appear cropped, you need to maintain the aspect ratio.
This looks what you need: Maintain aspect ratio of div but fill screen width and height in CSS?
Working example
Add styles to div with background:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
You can resize window to see result.
html, body {
position: relative;
height: 100%;
margin: 0;
}
div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div>
</div>
So I have an image which is 700px width which is what I'm using as a background image in a div which is 200px width.
I want to keep the image at that size so it can maintain a good resolution for smaller devices.
However the issue I'm having is because the image is larger than the div the image overflows (hidden) but I want the image to resize and fit depending on the size of the div, instead of overflowing.
My div is currently:
.featurebox{
background: #F9C112 url(../img/pan1.jpg) no-repeat center top ;
width:200px
}
Define both width and height and then use background-size: cover
Try adding this:
background-size: 100% 100%;
if you use
background-size: 100%;
the height is set to auto, and can then still overlap.
can you try this?
background-size:100%;
You can set background-size:
.featurebox {
background: #F9C112 url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center top;
background-size: 200px 200px;
width: 200px;
height: 200px;
}
<div class="featurebox">
</div>
I have image of size 1400x560 and I want the my jumbotron div to scale to fit the size of the image. It works fine when i set the width of the jumbotron to that of the image but when I shrink the website to mobile view, I have issues. So how can I fix this?
I forgot to mention i have issue with the height and not the width, The jumbotron scales div to the width of 1400 but not to the height 560px
Here is a preview of the html page http://threeguys.us/rts/testing.html.
When i shrink the page , i want the image to resize according to the width of the browser
index.html
<div class="jumbotron">
</div>
css
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
}
What you're looking for is background: contain;. Simply add this to your class as follows:
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
background: contain;
width: 100%; /* make sure to define width to fill container */
height: 100px; /* define the height in pixels or make sure */
/* you have something in your div with height */
/* so you can see your image */
max-width:1400px; /* define the max width */
}
The background image will now scale with the size of the div (assuming the div is scalable). If you want to constrain your div so it does not get bigger than a certain size (in your case, the size of the background image), use max-width: 1400px;
See my JSFiddle example.
There isn't a way to get the div to fit the size of its background image, so I suggest you use an img tag instead.
To get your div to fit the size of the image, use display: inline-block on the div:
.jumbotron
{
display: inline-block;
border: solid red 1px;
}
<div class="jumbotron">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
Try:
background-size: 100%;
width:100%
position:relative;
Hope it helps you
Wrap your jumbotron with:
<div class="container"></div>
It should make it fit width-wise to the rest of your page.
Make it simple. Thanks
.jumbotron {
background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="jumbotron"></div>