I want a background image that automatically fits the div size.
I have several div of the same class, each with different dimensions, is it possible to set the width and the height of the image, exactly to the dimension of the div ?
Do you think is better to use img or background-image?
P.S I don't know if is it possible to set the dimension of the background image, of course is possible for the tag img, but if I use the tag img the image is separated from the content (it dosen't overlap as a background)
Personally if you're going to modify things in this way, I think using img is better.
You can literally just set the height and width of the div if that's what you want.
<div class="box"><img src="Path/to/image.png"/></div>
and then the CSS would be something like this:
.box {
height: 300px;
width: 300px;
}
.box img {
height: 300px;
width: 300px;
}
That's one way of doing it anyway. You could also set it so that the height is 100% the size of the div, but the width is set to auto so that it scales with it. That way the image won't distort. Like this:
.box img {
height: 300px;
width: auto;
}
You could try something like this
<div style="width:200px;height:200px">
<img src="image.png" width="100%" height="100%"/>
</div>
With the background image, you'll not be able to resize the image to the exact dimensions of the div tag.
Related
I have an image of arbitrary shape and size which I want to enlarge into a containing div without changing its proportions and without cutting off part of the image.
Below is a diagram of what I have in mind:
Note that the image is sometimes centred vertically, and sometime horizontally.
If the image is always wide, I can use:
img {
width: 100%;
height: auto;
margin: auto;
}
but that won’t work if the image is narrower, as it will end up chopping off the top & bottom.
Is there a way, possibly using grid or flex, which will accommodate the image?
Use object-fit: contain for the img selector in the css,
your <img> tag will be your gray frame like in above.
the real picture will be hosted as you wish no matter what the intrinsic size of the image is and the size of the <img> tag is.
Thanks to #Terry’s comment, I found a solution using object-fit.
div#container {
background-color: #123456;
width: 480px;
height: 240px;
}
div#container>img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div id="container">
<img src="https://javascript101.webcraft101.com/images/photos/large/bromeliad.jpg" alt="Random" title="Random Image">
</div>
The main features are:
object-fit describes how the image is positioned within its container. In this case, it is wholly contained, and ends up being centred in the process, while retaining its proportions.
The width and height are set to 100% (of the container). I think this forces the image to scale into the container.
What a wonderful property!
The goal I'm trying to achieve on my drupal 7 website is keeping an article image's border a certain size for all images (120x120) while the actual image themselves adjust according to the image style (100x100) and are middle aligned.
(I'm unable to provide example images because I don't have 10 reputation points...)
So for a portrait image the height would be capped at say 100px and the width will be whatever is the aspect ratio is.
Same thing in reverse with a landscape image, with the width being capped at 100px and the height being whatever the aspect ratio is.
All while the grey border stays a 120x120 block, and not changing according the image size.
Let me know if you need any code from my website to help with solving this.
The simplest way to achieve your goal is to use table-cell display property with vertical-align: middle on the parent div, with desired border, height and width set. Than your img should have set max-width and max-height properties to 100%. So having the HTML structure like this:
<div class="img-container">
<img src="..." />
</div>
Your CSS could be:
.img-container {
width: 120px;
height: 120px;
display: table-cell;
vertical-align: middle;
}
.img-container > img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
Codepen showing the result: http://codepen.io/anon/pen/BpeOzG
I have some photos which have big sizes, I would like to set them to the Parent's dimension size. If one time the parent dimension is 1200x800, I would like to set the photo dimensions to 1200x800, but also I would like to see the whole image. If my parent dimension is 500x300, I would like the image to be 500x300 and so on.
Is this even possible? I want to shrink the image or expand it according to it's parent's dimension.
Thanks!
The css property that you want is max-width :
Css
img {
max-width:100%;
}
You could add a container around your image and set overflow:hidden to prevent images to get bigger than the defined width/height.
Use this bit of css to scale your image:
img {
max-width: 100%;
max-height: 100%;
}
I might be naive, but isn't this as simple as this ?
img {
width:100%;
height:100%;
}
Try this in the image tag
<img src="url.jpg" width="100%" height="100%" />
Or set the backgound of the element as the image and do the same.
In general it might help to remember this:
1: A track is not a container.
2: A grid area is not a container.
3: A nested element is not a container unless you declare it as such.
Declarations such as max-width: 100%, object-fit: contain and so on describe how the element (e.g img) will behave inside its container - not inside the track or area it happens to have been placed in. And not inside the tag it lives in, nested inside its container. e.g after
HTML:
<div class="myContainer">
<div class="myTopRow">
<img src="myPic.jpg">
</div>
<div class="myBottomRow">
<span class="mySubText">Your subtext here.</span>
</div>
</div>
CSS:
.myContainer {
display: grid;
grid-template-rows: [row1Start] 1fr [row1End row2Start] 1fr [row2End];
grid-template-columns: [col1Start] 1fr [col1End];
}
.myTopRow {
grid-rows: row1Start / row1End;
grid-columns: col1Start / col1End;
}
.myBottomRow {
grid-rows: row2Start / row2End;
grid-columns: col1Start / col2End;
}
.myTopRow img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
you've made a grid consisting of one column and two rows. The image in the top row will seem to spill over into the second row, colliding with that row's spanned text. In reality there's no overflow - the image is not contained by the top row (which has not been declared as a container, but is "merely" an area spanning tracks). Within it's actual container (the whole two-row box) the image is perfectly contained.
In the case the image is bigger than the parent container you have to set :
img {
max-width: 100%;
}
If your image is smaller you have to set instead
img {
min-width: 100%;
}
otherwise it will just stay at its original width and height.(the Height is set to auto by default)
try to use the max-width property, this might give a bug in earlier versions IE though
#custom img {
max-width: 100%;
max-height: 100%;
}
width: inherit;
height: inherit;
object-fit: contain;
How to do resize everything inside a div tag taking its maximum size nwidth and height
My div is:
<div style="width: 300px; height:60px">dynamique content </div>
However, if I have pictures, images, if it is bigger than the div, the image is not resize to the div, instead the div is getting bigger.
How can I achieve this ?
Thanks a lot
With CSS you could do:
div * {
max-width: 300px;
}
You can see an example here: http://jsfiddle.net/aEJuq/
you can do this by below method
id or class or name {
max-width: 300px;
max-height: 60px;
}
you can do this for image by either set the max-height and max-width in picture by either id or key or inline css or in the html img tag like <img src="image your" width="your width" height="your height">
Use max-width and max-height
#blockUI img {
max-width: 100%;
max-height: 100%;
}
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.