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.
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.
Anyone who has used twitter bootstrap knows that an image can be made responsive using the img-responsive class in the html img tag. However, these images take up 100% of the width of the division.
How can I make the image responsive while still keeping its original width?
You can put the image in a wrapper and give the wrapper the width you want the image to have.
HTML
<div class="imgwrapper">
<img src="img.jpg" class="img-responsive">
</div>
CSS
.imgwrapper {
width: 80%;
}
The above should in theory make the imgwrapper 80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.
If this doesn't answer your question, could you explain a bit better what you mean with keep original width, but make it responsive? Since making it responsive will resize the image, which means it will not have the original width.
You should have a wrapper around the image defining the actual size of the parent that could be used to place that image. It will be related to the parent div. Then apply .img-responsive to the image. This will cause the image to have the same width as the wrapper.
HTML
<div class="wrapper">
<img src="your-image.jpg" class="img-responsive" />
</div>
CSS
.wrapper {
width: 50%;
}
If you want to keep the original size (it will be resized to have small size but never higher), you should also add a max-width which will have to correspond to the image's original size. This will overwrite the original value of 100%
.wrapper img {
max-width: 280px;
}
The .img-responsive class applies max-width: 100%; and height: auto; to the image, so if you want to keep its original width explicitly you have to set width of image using width attribute of img tag.
I have (sets of) two differently-sized and shaped images within a variable-width div. I would like to rescale the images to have the same height, whilst maintaining their same aspect-ratio.
I hoped this code (see fiddle) would cause both images to have the same height as the parent div.
<div style="width:75%">
<img style="height:100%" src="blue_rectangle" />
<img style="height:100%" src="red_square" />
</div>
I'm happy to use tables, if this is the easiest solution.
Edit: to clarify, the result should look like misterManSam's solution below, with the images increasing in size (but not shape) as the page width increases.
Depending on the rest of your content, you could control the height of the images with the width of the viewport, using viewport-width (vw) lengths. The max and min height ensure that the images do not get too big.
Compatibility: Mostly good — IE9+ and the most common browsers support vw
Example
Note: The images provided in your example each have a different transparent border width. The black background shows the actual image width and height.
img {
height: 20vw;
background: #000;
max-height: 200px;
min-height: 100px;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Rectangle_example.svg/200px-Rectangle_example.svg.png" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Basic_square.svg/200px-Basic_square.svg.png" />
I might misunderstand your question, but isn't this just a way to make them the same height?
http://jsfiddle.net/nakx7pee/2/
div{
width:75%;
height:8em;
}
img{
display:inline-block;
height:100%;
width:auto;
background:yellow; /* to show: same height */
}
(you didn't give any information about the height of the div)
Basically, I've got a div with width set to 100%, within which there is an img link. The img's width is set to auto with a height of 600px. The link area stretches over the width of the whole div, in this case the width of the whole page, rather than just the img.
<div class="feature">
<img src="feature.jpg" />
</div>
.feature {
width: 100%;
height: auto;
}
.feature a img {
width: auto;
height: 600px;
display: block;
margin: auto;
}
I don't want to change the div's width to a set value (which does work), because I want to be able to add images later on that may have different aspect ratios. Does anyone have a solution? thanks.
This shows the result if you set the width of the div manually: http://jsfiddle.net/L1xanprh/4/ I also tried just setting the div width to auto as well, it game the same problem as the width being 100%.
For that a, make it's display inline-table
avoid using width:auto.
give the exact position of the image where you want to appear the image.
and use exact width and the height of the original image.
if not your image will get stretched.
If not use the width and height values with accept ratio is equal with the accept ratio of the original image.
Then your image will not get stretched. But if your using a image with lower pixel rate your image will
blurred when your using higher width,height values than the original image.
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