I've got a page using a background-image.
background-size is set to cover.
The content is just a heading and two buttons.
I want the div to be always the proportional height fitting to the background.
What's the best way to do this (if possible with pure CSS)?
You can use one same image file for both background and inline, and set the inline image to visibility: hidden; (keep space), so the div can automatically resize based on the image size.
There is no way to detect the background image size with CSS.
.container {
background: url("https://picsum.photos/600/150?image=0") 0 0 no-repeat;
background-size: cover;
position: relative;
border: 1px solid red;
overflow: hidden;
}
.image {
visibility: hidden;
}
.title {
position: absolute;
width: 100%;
background: rgba(255, 255, 255, .5)
}
<div class="container">
<div class="title">Hello</div>
<img class="image" src="https://picsum.photos/600/150?image=0">
</div>
know this is old thread but stumbled upon it.
the following works for me if i know the dimensions of the image,
eg. 1220x404 => 1220/404 = 3.01980198 = 30.1980198
header { max-height: 404px; height: 30.1980198vw; }
Related
I have an image of size 700px(width) x 333px(height) which have aspect ratio 2.10. I want to display this image in size 327px(width)and 183px(height) with aspect ratio 16:9.The original images could be cropped or resized with minimum distortion and final aspect ratio of each element should be 16:9 and displayed as 327px(width)and 183px(height).Following is the code I tried.
object-fit: cover; works fine, it crops and resizes the image to size 327px X 183px but it is not supported on all/older browsers versions. What could be an alternative to achieve the same result through CSS supported on all and older browsers?
/*original image : http://starmoz.com/images/lancia-gamma5.jpg */
.cropAndResize {
width: 327px;
height: 183px;
object-fit: cover;
}
<body>
<div>
<img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
</div>
</body>
For crop purpose I often make use of background-image on a element of type block or inline-block instead of relies on img tag:
.cropAndResize {
width: 327px;
height: 183px;
background-size: cover;
background-position: 50% 50%;
background-image: url('http://starmoz.com/images/lancia-gamma5.jpg');
}
<body>
<div class="cropAndResize"></div>
</body>
One simple solution could be:
.cropAndResize {
height: 183px;
margin-left: -20px;
}
div {
width: 327px;
overflow: hidden;
}
Maybe something like this could work for you? The only caveat is you need to set a specific margin to align the image within the container to center it.
.crop {
width: 327px;
height: 183px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
.cropAndResize {
position: absolute;
min-width: 100%;
max-height: 100%;
margin: 0px 0px 0 -20px;
}
<body>
<div class="crop">
<img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
</div>
</body>
I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.
As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>
Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element
Given a scenario where you don't know the height and width of image elements in advance, let's say that in cases where image height is greater than image width, you'd like to vertically center the image by cropping the same amount of pixels form its top and bottom, such that the new image height matches the image width. For example, if an image has a width of 200px, and its height is 250px, crop 25px from its top and from its bottom.
Here's an example setup:
HTML:
<div class = 'cell'>
...
<div class = 'image_container'>
...
<img ...>
</div>
</div>
CSS:
.cell {
display: inline-block;
float: left;
/* width will be changed by use of '#media screen'.
Smaller browser window -> larger width */
width: 31%;
}
.image_container {
position: relative;
float: left;
width: 100%;
}
.image_container > img {
width: 100%;
}
Is it possible to accomplish the aforementioned center/crop operation using only CSS, or is it necessary to use javascript/jquery for this?
You can use the object-fit CSS attribute. It acts a lot like the background-size attribute.
.image_container > img {
object-fit: contain;
}
Note that this doesn't have full browser support as of now (October 2016) so you may want to look into setting the image as a background on a div and using background-position and background-size to deal with this instead of an <img> tag.
.image_container {
height: 300px;
background-color: cornflowerblue;
image-rendering: pixelated;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALklEQVQoU2NkgID/UBqdYmSESoJobOA/sgKQKTCFMDaKAuqYAHMs3CqiHInXmwDZGBMDEmk6SQAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center center;
background-size: 200px;
}
<div class="image_container"></div>
.cover_image {
height: 400px;
background: url('http://lorempixel.com/g/400/200/') no-repeat scroll center center;
background-size: cover;
}
<div class="cover_image"></div>
I need to scale an image inside a div properly, so that the image keeps its proportions and so that either the width is equal to 100% or the height is equal to 100%.
So basically that the image takes up as much space as possible in the div whilst maintaining aspect ratio. And lets keep in mind that the div can change width and height.
So I have the intuition for this, but I don't have the code ...
The idea would be to get the ratio (height/width) of the div with
JavaScript/jQuery. => ratio A Then get ratio (height/width) of the image. => ratio B
Note: If ratio > 1, then we have a portrait image or div.
And if ratio < 1, then we have a landscape image or div.
If ratio A < ratio B, then we want height of image to be set at 100%;
If ratio A > ratio B, then we want width of image to be set at 100%;
So if we have a responsive div, width or height = 100% will change dynamically.
Is this possible?
Here are 2(css) solutions :
http://codepen.io/cryptcslaughtr/pen/LNoMBY
.container {
width: 100px;
height: 200px;
border: 1px solid #333;
background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}
<div class="container"></div>
http://codepen.io/cryptcslaughtr/pen/qZGLvE
.container {
width: 250px;
height: 130px;
border: 1px solid #333;
}
.container img {
max-width: 100%;
max-height: 100%;
}
<div class="container">
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" />
</div>
You can simply set parent div to position relative, and overflow hidden. And then do this:
.bg-img {
bottom: -1000px;
left: -1000px;
margin: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
right: -1000px;
top: -1000px;
}
This will insure no matter whats the size of the container it will always cover it 100%. This will also contain image proportions.
If you need img tag for SEO/alt/ARIA/whatever, here is modified Cryptc_Slaughtr's solutions combined into one:
.container {
width: 250px;
height: 200px;
border: 1px solid #333;
background: url("https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png") no-repeat left top / contain;
}
.container img {
width:100%;
height: 100%;
opacity:0;
}
<div class="container"><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="Put your image" title="Put your image" /></div>
I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output