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
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 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/
Is there a way to display a set of images horizontally in the center of a div even when the image is wider than the div? For instance, if the outer div is 100px wide and the image is 200px wide then I want the image center (i.e. at 100px) to be aligned with the center of the containing div (i.e. at 50px).
At the moment it works fine when all the images are smaller than the div, but when they are wider, they become left aligned. If they are all the same width, then I can set the scroll position of the div, BUT they are dynamic images and can be any width. Look at the fiddle for an example.
The intention here is to produce something like a document viewer where each image is a page in the document and would therefore be aligned in the middle.
Thanks for any help!
Nest the images inside another div and set its display to inline-block
HTML
<div id="outerdiv">
<div id="innerdiv">
<img src="http://ipsumimage.appspot.com/60x20,ff0000" />
<img src="http://ipsumimage.appspot.com/200x20,ff0000" />
<img src="http://ipsumimage.appspot.com/100x20,ff0000" />
</div>
</div>
CSS
#outerdiv
{
overflow:auto;
width:100px;
background-color:gray;
text-align:center;
}
#innerdiv {
display:inline-block;
}
See this fiddle.
Well Im just starting out with jquery but I can give you a theoretical answer. Use jquery to take width of parent div. take width of image. find the difference in both and move negatively to the amount in the image.
Example: div width is 50
image width is 100
put position relative on the parent div
put position absolute on image
and put 50-100=50/2(actually 25 as the width is distributed to both sides. 25 to the left and 25 5 to the right.) as the left of the image
div parent{
position:relative;
}
div img{
position:absolute;
left:-25; //actually this is the difference of the image and div/2
}
Use jquery to do this dynamically
I'm trying to get an image centered on the screen, and I want it to stretch horizontally.
The trick here is that I need set margins. Lets use 200px as an example.
The image needs to stretch horizontally (and possibly scale proportionally) to maintain those margins no matter the windows size.
I can center it, and I can stretch it, but I can't do both at once for some reason.
Also, this needs to be CSS only! No JS.
Any help is greatly appreciated! :D
P.S. I've seen ton of questions about scaling images with the window size, and this is not the same thing. I need set margins, in pixels, that stay constant, while the image between them stretches horizontally.
I put a container around my image which would preserve the margins. As the window's width changes, the margin stays intact - only the width of the .container is changed. By setting the width of the image within the container to equal 100%, the entire image would be scaled (proportionally) based on the width of the container:
CSS:
.container {
margin: 0 200px;
background: red;
}
.container img {
width: 100%;
}
HTML:
<div class="container">
<img src="http://www.aviationnews.eu/blog/wp-content/uploads/2012/07/Olympic-Rings.png" />
</div>
You could use two divs, the outer with the set margins, the inner with width set to 100%:
http://jsfiddle.net/tqmrY/4/
<div id="holder">
<div></div>
</div>
#holder {
background: #333;
height: 100px;
margin: 0 100px;
}
#holder div {
width: 100%;
}
One way you could do this is by putting your image in a div and then putting padding on the div.
You would set your img to have a width of 100% and auto height, and then put padding on the containing div.
Here is an example
http://jsfiddle.net/uJnmf/
I have a bunch of image thumbnails I'm displaying in a web page. All of the images are 256 pixels wide, and I'm shrinking them 50% with <img width="128px" ...>
Most images have a 4x3 ratio, so they grid quite nicely over several rows.
However, some images are very tall (e.g. 256x1200). I would like to specify a maximum height for these images, but the image must be truncated (i.e. showing only the top part of the image) and not scaled (which would undesirably squish the image).
I've tried specifying CSS img { max-height="128" } but of course that is giving me the undesired scaling.
So: how can I specify a maximum height that will cause the image to truncate and not scale?
update: thanks all, I've added an example below.
Wrap them in a classed div, set the height on the div to 128, and then set overflow: hidden for that class.
Wrap the image in a div, set the div's height and width to what you want. Add a style of overflow:hidden to the div.
Thanks to all who responded... here's an example of the solution.
<div style="max-height: 170px; overflow: hidden;">
<img width="128" align="top" src="img1.jpg">
<img width="128" align="top" src="img2.jpg">
<img width="128" align="top" src="img3.jpg">
</div>
Each of the images taller than 170 pixels is truncated and the images align to the top. I put the style information inline for brevity's sake. In my real code it's in a style section.
If we're showing a row of images whose width is fluid (e.g. four columns of images each with width 25%), and we want their height to scale as their width changes, one way would be to use a row of divs with background-image: url(...) instead of <img> tags.
This allows us to set padding-bottom on the divs which will give them a height that is a percentage of their container's width. For example, if we wanted perfect square images, we should set their width % and padding-bottom % to be the same. You can adjust to keep whatever aspect ratio you want for the images.
.image-container {
width: 33.33333333%;
padding-bottom: 33.33333333%;
margin: 0;
float: left;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
See https://jsfiddle.net/qxn87wmo/20/
It's then just a matter of setting background-size, background-position as desired.