I was searching for solution for hours but can't find it.
I have div with fixed height and 50% width. And I want to display a picture inside it with 100% width and default aspect ratio but vertically centered
Thanks ;)
<div class="wrap">
<img class="img">
</div>
Add overflow:hidden to your div and then adjust the margin of the image into the negative. How much depends on the div's fixed height and the image height.
EDIT
Consider using CSS and background images if you don't know the image heights. Instead of outputting an image tag, output an inline style on the div.
<div class="css-is-good" style="background-image: url(image.jpg);"></div>
CSS
div.css-is-good {
background-position: 50% 50%;
/* if you need to stretch it, use background-size: */
background-size: 100% auto;
}
Updated fiddle: http://jsfiddle.net/willthemoor/Cu3G5/
Related
I would like a div with a background-image that keeps the aspect ratio of the image, with a fixed height of 500px and i want no "padding" on the background of that div.
Is this possible to do?
I Can get a div with a fixed height and a background-image that keeps aspect ratio :
<div style="background: url(something.png) 50% 50% / cover #D6D6D6;background-size: contain;background-repeat: no-repeat;height:500px"></div>
This makes the image centered in the middle of the div ( either vertically or horizontally ) but gives some padding to the background of the div ...
Can anybody help me out ?
What you are trying to achieve is not possible using only CSS, you could use JavaScript to detect the width of the image and then set the width of the div to be the same. Or alternatively you could simply remove the background-image property and rather add the image as an img tag into your HTML. If you do that you can display the div as inline-block which will take care of making the div as wide as the width of the image.
body
{
text-align:center;
}
div
{
background-color:#666;
display:inline-block;
}
div img
{
height:500px;
}
<div>
<img src="http://lorempixel.com/200/500" alt="">
</div>
background-size: contain; will always display the whole image (without cutting off anything), thereby leaving some space either vertically or horizontally.
On the other hand, background-size: cover; will fill the whole DIV in a way that the shorter side of the image corresponds exactly to the length or height of the DIV (depending on the relation of the proportions between DIV and image) and the longer one is cut off on the sides or on top and bottom.
If you don't want a distorted image, those are the options you have.
I want to use css to make an image keep its aspect ratio (16:9) and be responsive at the same time.
This image will always be in the center of the screen. Check the schema to help you.
I found this post and I tried Chris's solution and Isaac's solution. But I cannot bring the image to the center. I tried using Bootstrap like so.
<div class="col-md-4">.col-md-4</div>
<div class="wrapper col-md-4">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>
<div class="col-md-4">.col-md-4</div>
or
<body>
<div class="col-md-4" id="wrap1">.col-md-4</div>
<div class="col-md-4" id="aspectRatio">Aspect Ratio?</div>
<div class="col-md-4" id="wrap2">.col-md-4</div>
</body>
but all the divs appear the one underneath the other.
Any ideas on how to bring the div in the center, by using Bootstrap or not?
Thanks
I always put my img in a div and center the div with:
margin:0 auto;
And for responsive image define width and make the height is auto.
Hope it helps.
This will center your element on the page.
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
I believe you would have to define a min-width or max-width for your image at 100% of a container that is at the aspect ratio that you want for the second part of your question. Also, if you need to dynamically set the aspect ratio there is always JS. Qjuery has functions you can use I think so that will not hard if you are already using it inside of your project.
EDIT: to center the image in your second header I would suggest having a structure such as:
-second header
---------wrap
-----------------image
have the image as 100% size of the wrap.
have the wrap relative to the second header with a width and height of 100% relative to it.
I hope this helps :)
Actually, I'm having very big width image. Width is 3000px and height is 100px. I need to display image's center part in my browser.
If I put my image, It's showing left part of the image. But first I should display center part. If Display screen is big, then side can display.
and it's inline image only.
<div class="my_img">
<img src="img.png" >
</div>
What can I do?
Use margin:0 auto; display:block;. This will make it to the center.
contain scales the image to the largest size such that both its width and its height can fit inside the content area.
Try:
img{background-size:contain;}
Not the cleanest way I'm sure, but it works:
http://jsfiddle.net/7eA3W/
<div>
<img src="http://placehold.it/3000x100" alt="" />
</div>
div {
overflow: hidden;
width: 300px;
}
img {
margin-left: -1350px; // minus half of the image width, minus half of the container width
}
If you want to show the center of the image, what you have to do is using a div instead of an img.
In that div's style you set tthe background to be the image you want to show, and then, you center it with css background-position: 50% 0px
<div class="my_img">
<div
style="background-image:url(img.png);
height:YOUR_IMAGE_HEIGHT;
background-position: 50% 0px;">
</div>
</div>
with this, if the screen is small, the imagen wiil be cropped and show the center. If the screen is large, youll see the whole image, also centered
I have a container that will grow/shrink in height based on how much text is dynamically placed inside it. The container will have a background image that needs to stretch/shrink as the container changes height and this image cannot be cropped in any way. I am wondering how would I style .container to get the background-image to be stay 100% of the div.
I have tried the following, but it didn't seem to work:
.container { background: url('backgroundImage.jpg') 0 100% no-repeat; }
Sample of HTML Structure:
<div class="container">
<p class="text">This is a short container</p>
</div>
<div class="container">
<p class="text">This<br> is<br> a<br> tall<br> container</p>
</div>
You need to set the background-size property.
background-size: 100% 100%; will scale it to fill the container both horizontally and vertically.
I usually prefer background-size: cover; as it gracefully scales up the image as needed, maintaining the aspect ratio. Make sure to check the support for background-size, as it is a fairly new property.
In case background-size: contain; is not helpful and if you are looking for full HEIGHT background image without loosing aspect ratio then use below written CSS
background-size: auto 100%;
setting first parameter to "auto" will ensure that image keep width in ratio of current height. Second parameter which is "100%" will help background image adapt same height as DIV.
Did you try background-size: cover; ?
In your example you're adjusting background-position.
There is a property in css3 called as background-size:cover; and background-size:contain;. You might want to use background-size:cover; to suit your needs.
**contain
Specifies that the background image should be scaled to be as large as
possible while ensuring both its dimensions are less than or equal to
the corresponding dimensions of the background positioning area.
cover
Specifies that the background image should be scaled to be as small as
possible while ensuring both its dimensions are greater than or equal
to the corresponding dimensions of the background positioning area.
**
div {position: relative;}
#wrapper {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% auto;
}
<body>
<div id="wrapper">
</div>
I am trying alternate ways to present the background image of ocean.png in different elements. Right now I am putting into a div and it isn't showing. Earlier, I put into the body which shows and the image able to stretch fullsize when first stretched horizontally and then vertically on the browser but when I stretch vertically first then background image in body is not stretching full screen, white space on top and bottom.
I am experimenting on a div now but it didn't show up at all.
You have to set the width for the wrapper. width:100% and height:100%
Need to set the width and height of the wrapper div, also if the image is not in the same directory as the CSS the reference is wrong. if you have images in a /images directory you should call them as url(/images/myimage.png)
Set the width and height of the wrapper as others have said and join those css styles in one declaration and you can get rid of all other styles once you set the dimensions of the container.
background: url(ocean.png) center no-repeat