How can I make an image 100% of a div ?
I have a 300x300 image and I want to make it the full size of a bigger div. (the size of this div can change, so I have to specify somewhere 100% of it)
Is there a solution in CSS or Javascript ?
try this:
<img src="test.jpg" alt="test" id="bg" />
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
css3 also supports this:
#testbg{
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
Just assign the CSS style width: 100% in the image tag to have it cover the whole space of its parent container.
Example or jsFiddle:
<div style="width: 500px;">
<img src="yourPic.png" style="width: 100%" />
</div>
<div style="width:450px;height:450px;">
<img src="photo.png" style="width:100%;height:100%;"/>
</div>
Try this: http://jsfiddle.net/XUZV5/
<div style="height:100px;width:300px;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Mars-Schiaparelli.jpg/280px-Mars-Schiaparelli.jpg" style="width:100%;height:100px;"/>
</div>
The CSS below will scale your image and fill 100% of the width of your div
#imgId {
width: 100%;
height: auto;
}
However if you actually want to fill the entire div by stretching the image use
#imgId {
width: 100%;
height: 100%;
}
One other useful tip is when your width is specified as a percentage and your image is square, as yours is.
HTML
<div class="container">
<img src="sample.jpg">
<div style="clear:both;"></div>
</div>
CSS
.container {
position: relative;
width: 50%;
height: 0;
// % padding is calculated as % of width rather than height
// so height will equal 50%
padding-bottom: 50%;
}
img {
position: relative;
width: 100%;
// image is square so as long as width is 100% then height will be the same.
height: auto;
}
html, body {
height: 100%;
width: 100%;
}
The above means the image will always resize to fit the parent div exactly.
Fiddle here
Related
I am trying to display images from a youtube for videos the display content size
height:180px
width :270px
From youtube images are coming with some black spece on the top and bottom
ex:
i like to display images like this
searched for answer on the internet
found these links are helpful but no solution for how i want to display the image
How to automatically crop and center an image
This one most helpful but i can't use background-image tag. i want it in tag
CSS Display an Image Resized and Cropped
Anyone help me solve this..Thank you
Update
I have updated the answer yet I'm not certain what you want, you just said what you didn't want. So I'm assuming you want to:
Maintain aspect ratio
Avoid cropping
No black bars, just the image edge to edge
We know this is a widescreen poster with the aspect ratio of 16:9, so if you want a width of 270px, do the following:
Divide the width by 16
270/16 = 16.875
Take that quotient and multiply it by 9
16.875 * 9 = 151.875
Round up or down
Round up to 152px
Change the height with the result then apply object-fit:cover
152px is the height of an image that's 270px wide and has an aspect ratio of 16:9.
Please review the Fiddle and updated Snippet
Edit
To reflect the update and better understanding of OP's objective, this Snippet is edited.
object-fit is a simple CSS property. See this article The Snippet below is annotated. Btw, the only code that you need from this Snippet is object-fit: cover, the rest of the styles and markup is just for presentation.
Snippet
/* We know this is a widescreen poster with the aspect ratio of 16:9, so if you want a width of 270px, do the following:
270/16 = 16.875
16.875 * 9 = 151.875
Round up to 152px
152px is the height of an image that's 270px wide and has an aspect ratio of 16:9 */
.bg1 {
width: 270px;
height: 152px;
object-fit: cover;
outline: 2px dashed blue;
}
.bg2 {
width: 270px;
height: 152px;
object-fit: contain;
outline: 2px dashed blue;
}
.bg3 {
width: 270px;
height: 152px;
outline: 2px dashed blue;
}
aside {
height: 100%;
width: 40%;
display: inline-block;
position: absolute;
right: 0;
top: 0;
}
figure {
height: 180px;
width: 270px;
max-width: 50%;
}
.pointer {
position: absolute;
}
.pointer b {
font-size: 32px;
}
#a.pointer {
top: 43%;
left: 52%;
}
#b.pointer {
bottom: 5%;
left: 52%;
}
.box {
width: 600px;
height: 450px;
position: relative;
}
.spacer {
position: relative;
padding: .1% 0;
width: 2px;
}
code {
font-family: Consolas;
color: red;
}
<section class="box">
<figure>
<figcaption>object-fit: cover</figcaption>
<img class="bg1" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" />
</figure>
<!--<div class="pointer" id="a"><b>⬅</b>
<br/>Space</div>-->
<figure>
<figcaption>object-fit: contain</figcaption>
<img class="bg2" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" />
</figure>
<figure>
<figcaption>Without anything but the height property</figcaption>
<img class="bg3" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" />
</figure>
<aside>
<p><code>object-fit: cover</code> will stretch an image to the edges of it's container (parent element) while keeping aspect ratio and cropping.</p>
<p>But when given the correct dimensions, <code>object-fit: cover</code> will result in a perfect fit edge to edge. No cropping either.</p>
<div class="spacer"> </div>
<p><code>object-fit: contain</code> will stretch an image to the edges of it's container while keeping aspect ratio but will not crop at the edges, so as you can see, this image has space left and right. At wider dimentions, the space will manifest below and above.</p>
<div class="spacer"> </div>
<p>This is the image when set to it's aspect ratio at 270 x 152px and as you can see, without <code>object-fit:cover</code>, math alone will not resolve the problem.</p>
</aside>
<!--<div class="pointer" id="b"><b>⬅</b>
<br/>Space</div>-->
</section>
You could just clip the image. For more information about clipping you can go here: http://www.w3schools.com/cssref/pr_pos_clip.asp
Example:
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
I don't know if this is what you are looking for but it looks a little bit like what you want to do no?
the 1st img is height 220px and width 270 and then i put the img behind the div with z-index 1 and i gave the div an overflow hidden and the heigth 180px after i just did have to give the img an margon top -20px to put it in the middle
that is what just came in my head hope it is helpfull
.box{
height:180px;
overflow:hidden;
z-index:2;
}
.test{
z-index:1;
margin-top: -20px;
}
<div>
<img src="https://unsplash.it/270/220?image=871" alt="" class="">
</div>
<hr/>
<div class="box">
<img src="https://unsplash.it/270/220?image=871" alt="" class="test">
</div>
.box{
height:148px;
overflow:hidden;
z-index:2;
}
.test{
z-index:1;
margin-top: -57px;
width :350px
}
.box1{
height:125px;
overflow:hidden;
z-index:2;
}
.test2{
z-index:1;
margin-top: -50px;
width :300px
}
<div>
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="te">
</div>
<div class="box">
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="test">
</div>
<div class="box1">
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="test2">
</div>
if your width is always fixed you give the width to the image and then you find the rigth height and then you have your "container where you can put all the images you want if they always have the same fixed width
I'm trying to display an image (6000px width, 300px height) at the end of the main-content like background image. The image should fit the width of the screen, but keep the origin height.
In other words somehow always crop the image at the center while the width of the x-crop is the screen width size and height crop is the origin height of the image.
I have made the image with 6000px width so that I can fit all the screens.
the code below does not work as expected its obvious, it just display the original img while scaling the height to keep the aspect ratio relative to the screen width.
newnewwaves.svg : http://svgshare.com/i/3DT.svg
how I want to be displayed: https://ibb.co/e80Ddw
HTML:
<div class="main-content">
...content
<div id="header-waves">
<img src="/assets/images/newnewwaves.svg" alt="">
</div>
</div>
CSS:
.main-content {
position: relative;
}
#header-waves {
position: absolute;
left: 0;
bottom: 0;
}
#header-waves img {
width: 100%;
height: auto;
display: block;
}
Try this:
.img-class {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
object-fit: cover;
}
This will help in maintaining aspect ration by restricting the width and cropping the image to center it.
If that doesn't work, Please try this :
.img-class {
width: 100%;
height: 400px; /* Set your fixed Limit */
background-size: cover;
}
You could place the image in a container with width: 100% and set the overflow property to hidden.
Use flexbox to center the image within this container.
Note that this snippet is easier to test if you make it full screen and resize the browser...
#header-waves {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
}
<div class="main-content">
<div id="header-waves">
<img src="https://placehold.it/6000x300" alt="">
</div>
</div>
You can do it using background: url(...), like the example..
.main-content
{
background: url('http://via.placeholder.com/6000x300');
background-size: auto 100%;
width:100%;
height:300px;
}
<div class="main-content">
...content
</div>
I'm attempting to set up a way for users to be able to hover over a small preview of an image and have a "featured" section show this image in its full size. I've managed to accomplish that with the code below.
My problem is when images are very different sizes (one landscape and one portrait It looks very bad and makes the page jump.
Goal: I'm trying to figure out a way to avoid this. I want to find a way to display the main image in a uniformed look. Aka the same size. I want to accomplish this without heavily distorting the images by changing their sizes. Any help is hugely appreciated.
Check out the JS fiddle: https://jsfiddle.net/4hrvxpe2/10/
HTML:
<img id='mainPicture' class="image-resposive" src= "https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
<br>
<br>
<div class='smallerImages'>
<img id='imageNum1' class="small" src="http://i.huffpost.com/gen/4393678/images/o-THE-MATRIX-facebook.jpg">
<img id='imageNum2' class="small" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
</div>
CSS:
.smallerImages{
display:inline-block;
}
#mainPicture{
width: 75%;
height: 75%;
display: table; margin: 0 auto;
}
.small{
max-width: 15%;
max-height: 15%;
min-width: 15%!important;
min-height: 15%!important;
}
Jquery:
$('#imageNum1').hover(function() {
$('.small').removeClass('selectedImage')
var src = $('#imageNum1').attr('src');
$('#imageNum1').addClass('selectedImage')
$('#mainPicture').attr('src', src);
});
$('#imageNum2').hover(function() {
$('.small').removeClass('selectedImage')
var src = $('#imageNum2').attr('src');
$('#imageNum2').addClass('selectedImage')
$('#mainPicture').attr('src', src);
});
Adding a max-height and max-width makes it better.
Check out https://jsfiddle.net/4hrvxpe2/13/
Or you can encapsulate it in a div. Something like
<div class="container"><img src="img.jpg"></div>
and give dimensions to the container, as in:
.container{
height: 100px; width: 200px; overflow: hidden;
}
Check out https://jsfiddle.net/4hrvxpe2/22/
Or
In order for the image to take a fixed size always use a div and set it as its background and make it cover the div:
Check out https://jsfiddle.net/4hrvxpe2/23/
If you don't want the images to affect the rest of the elements in the document you need to take them out of the flow.
This is possible if you give the selected image a fixed position and make use of the transform property.
With that being said, here's a very rough example of how I would do it.
Responsive example (open in full screen and resize the window):
$('#imageNum1').hover(function() {
$('.small').removeClass('selectedImage')
var src = $('#imageNum1').attr('src');
$('#imageNum1').addClass('selectedImage')
$('#mainPicture').attr('src', src);
});
$('#imageNum2').hover(function() {
$('.small').removeClass('selectedImage')
var src = $('#imageNum2').attr('src');
$('#imageNum2').addClass('selectedImage')
$('#mainPicture').attr('src', src);
});
body {
position: relative
}
.smallerImages {
width: 20%;
}
#mainPicture {
max-width: 55vw;
max-height: 75vh;
margin: 0 auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.small {
width: 100%;
margin: .5em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='smallerImages'>
<img id='imageNum1' class="small" src="http://i.huffpost.com/gen/4393678/images/o-THE-MATRIX-facebook.jpg">
<img id='imageNum2' class="small" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
</div>
<img id='mainPicture' class="image-resposive" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
<br>
<br>
My best attempt so far is the following. This works okay but it does distort images that are very tall. Can anyone suggest improvements?
JSFiddle: https://jsfiddle.net/4hrvxpe2/26/
.small{
max-width: 10%;
height: 100px;
min-width: 10%!important;
}
.smallerImages{
margin: 0 auto;
}
#mainPicture{
width: 100%;
height: 600px;
display: table; margin: 0 auto;
}
I accomplished the goal by changing 15% of maximum and minimum width in .small to 15vw.
.small{
max-width: 15vw;
max-height: 15%;
min-width: 15vw!important;
min-height: 15%!important;
}
vw is for the viewport width, while % will take the content size and size it relative to that. When the image changes, because of the image size differences, that image is increasing the content width, meaning that anything using % will change to the new width.
Here's the JSFiddle.
I have below code where I am trying to change the height and width of an image. For that, I gave height and width parameters in <img > tag.
Height of an image is being changed where as there is no affect on width. I want my image to be larger.
<div style="text-align: center; margin-top: 10px; width: 1000px; height:100px">
<img class="calIcons" src="#calLegend" alt="Legend" height="1000" width="100"/>
</div>
Image:
Dimensions 443x30
Width 443 pixels
Height 30 pixels
Bit depth 32
Make sure that the class calIcons does not manipulate the width or size.
Make width and height of image tag 100% and then adjust the width and height of the container div to whichever values you want. This works if the image is the only element in the div.
Instead of using the height and width attributes, to keep it clean you can try something like the following within your CSS file:
div > img{
width: 100%;
height: 100%;
}
Considering you have already set your dimension values within the parent div, you can just set the width and height to 100% for the child img.
Alternatively, if you don't want the image to stretch;
You can set it as the background-image of a div with a background-size of cover.
Like so (HTML):
<div class="parent-div"> <!-- the parent div with the set dimensions !-->
<div class="child-img"></div> <!-- the image !-->
</div>
CSS:
.parent-div{
width: 1000px;
height: 100px;
text-align: center;
margin-top: 10px;
}
.child-img{
width: 100%; /* set the dimensions to 1000px x 100px */
height: 100%;
background: no-repeat url('image/location.jpg');
background-size: cover; /* cover the whole div */
}
Replace your code with this. It will give you maximum dimensions of your image.
<div style="text-align: center; margin-top: 10px; width: 1000px; height:100px">
<img class="calIcons" src="#calLegend" alt="Legend" style= "width: 100%; height:100%"/>
</div>
I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
http://jsfiddle.net/HsE6H/
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
Not sure why I can't get it to work, do I need JavaScript for this?
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)
Auto-sizing Images to Fit a Div - Making the CSS Work
Here is one way of doing it, start with the following HTML:
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
jQuery Helper
You can use the following jQuery action to determine which class to set based
on the aspect ratio of the image.
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<height and then set the appropriate class.
Also, I added a check to take into account the aspect ratio of the containing block.
Before, I had implicitly assumed a square view panel.
For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.
Taking out the line: max-width:100% in your CSS file seems to do the trick.
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/
Here is another solution I found, that no need to seperate portraid or landscape or scripting.
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
https://jsfiddle.net/efirat/17bopn2q/2/
Background can do this
set image as background
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You should try this:
img {
min-width:100%;
min-height:100%;
}
I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
https://github.com/johnpolacek/imagefill.js/
It works if you add the following to the parent div for img styling;
https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
This could do the job:
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}
We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.
Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:
.container {
margin: 10px;
width: 125px;
height: 125px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
The key is in using line-height and setting the container to do the same.
I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}
Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.
Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!
The following solution is very short and clean if you need to insert img tag into div tag:
.container, .container img
{
max-height: 300px;
max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>
Also, if you don't need to use a div you can just write an even shorter css:
img
{
max-height: 300px;
max-width: 240px;
}