I have an img in a container. I have given the image width: 100% and now I want to set a max-height for the image without resizing it.
I tried adding max-height: 120px; overflow: hidden; but it is not working.
Why can't I crop the image to be 100% width and 120px height from top?
Demo:
https://jsfiddle.net/DTcHh/14727/
HTML:
<div class="row">
<div class="col-xs-6">
<img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
</div>
<div class="col-xs-6">
<img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
</div>
</div>
CSS:
img{
width:100%;
max-height:120px;
overflow:hidden;
}
You will need to wrap the image in a div. Use the same css on a div and it should work.
Well, if you set the max-height to 120px it's not going to go over that, which is why the image is resizing. I'm not too sure what you're looking for here?
This may help you out: https://jsfiddle.net/uxp1cbto/
img
{
width: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
}
Related
I want to adjust the height of div content automatically without setting fixed height of main div, but I'm not sure how. I tried with height:100% and height: auto
This is my code:
.tmr_box {
height: 470px;
}
.tmr_inner {
position: fixed;
width: 100%;
max-height: 440px;
overflow-x: hidden;
white-space: nowrap;
height: auto;
overflow-y: auto;
max-width: calc(40% + 110px);
}
<form>
<div class="row" style="margin-top: 10px;">
<div class="col-md-6 tmr_box" ng-if="vm.tmr">
.....
</div>
<div class="col-md-6 tmr_box" ng-if="vm.tmr">
<table>
...
</table>
</div>
</div>
</form>
Without fixed height property, it looks like this.
enter image description here
Thanks in advance for your help
I think the problem comes from the position:fixed of the div's content (.tmr_inner). Because of it the parent div render without paying so much attention to him. You should try to remove this property or add it to the parent (tmr_box) instead.
Imagine websites like 9Gag. You upload an image and they display it always with the same width and only the height changes.
How can I achive this? I cant even resize my images hardcoded.
CSS:
.post img{
height: 200px;
width: 300px;
}
HTML:
<div class="post">
<img src="img/bf1.jpg">
</div>
The image stays the same size.
You should change CSS style to:
.post img{
height: auto;
width: 300px;
}
Have you tried:
<div class="post">
<img height="200px" width="300px" src="img/bf1.jpg">
</div>
Hope this helps!
I'm aiming for a page with a collage of 4 photos;
a large one on the left taking up 50% width of the page and 100% of the height.
3 smaller photos, each taking up 50% of the width of the page but 33% of the height.
I'm running into problems with the larger image though,
my current CSS is;
.container {
width: 50%;
height: 100%;
overflow: hidden;
-size: cover;
}
and my html;
<div class="container">
<img height="100%" width="100%" src="jpg"></img>
</div>
the image's 50% width is fine but the height is only 50%.
It's a large image(4k) and my aim was to have overflow:hidden so that it fills the container but it's not working.
How could I do this?
Edit:
I'm aiming for it to be similar to this website:
http://www.masitupungato.com/
Suggested Solution
In fact, it is the easiest solution
Use two different divs, one for the left side and the other for the right side.
The left side div takes the half of the container width, and contains a image
The right side div takes the half of the container width, and contains 3 different divs, each one takes 33% of this right div height, and contains an image.
Use the CSS below:
.container {
width: 250px;
height: 250px;
margin: auto;
}
#left {
width: 50%;
float: left;
height: 100%;
}
#right {
width: 50%;
float: left;
height: 100%;
}
.right-inner{
width: 100%;
height: 33%;
}
.left-inner {
width: 100%;
height: 100%;
}
Expected output
Check it out.
You might change the height of the biggest image to fit the window of the device. Try to to set its height to "100vh", maybe it is what you were looking for.
you can use display:flex; property for this purpose. it will resolve your issue dynamically.
<div class="wrapper">
<div class="big-image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="small-image-wrapper">
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
here is the fiddle https://jsfiddle.net/d95hw8fq/
I'm trying to force images that are generated for a splash page to stretch to full size but at the same time have the image be responsive and fluid.
Here is the HTML
<div class="newsImage">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<img src="{xen:link attachments, $news.attach}" alt="{$news.attach.filename}" style="width: 500px; height: 200px;" />
<xen:elseif is="{$news.image}" />
<img src="{$news.image}" alt="{$news.image}" style="width: 500px; height: 200px;" />
<xen:else />
<xen:avatar user="$news" size="m" itemprop="photo" />
</xen:if>
</xen:contentcheck>
<div class='newsTitle'><h2>{xen:helper threadPrefix, $news}{$news.title}</h2></div>
</div>
Here is the CSS
I'm sure the max-width is incorrect in terms of making it responsive but it seems to force the stretching that I want.
.recentNews .newsImage { width:100%; height:auto; }
.recentNews .newsImage img { max-width:100%; height:auto; }
Thanks for the help!
Background size property:
background-size: cover;
background-size: 100% 100%\9; /* IE8 */
Is there a reason why you are setting the width and height with inline styles? It should work if you remove them.
style="width: 500px; height: 200px;"
max-width will work if the image is larger than the div, else you'd want to set the width to 100% so smaller images can stretch to the width of the container.
http://jsfiddle.net/WPxnG/2/
HTML
<div class="recentNews">
<div class="newsImage">
<img src="//lorempixel.com/1500/1500/" alt=""/>
</div>
</div>
CSS
.recentNews .newsImage img {
max-width: 100%;
}
.stretch {
width: 100%;
}
I have a horizontal layout with width: auto and height: 100%, but the body or container doesn't stretch to keep the aspect ration of my image.
I need the layout to be like this seen in this attached image:
I will use these images as a background of the panel divs.
Here is my code:
HTML
<body>
<div id="cover" class="panel">
<img src=""/>
</div>
<div id="panel1" class="panel">
<img src=""/>
</div>
<div id="panel2" class="panel">
<img src=""/>
</div>
<div id="panel3" class="panel">
<img src=""/>
</div>
<div id="panel4" class="panel">
<img src=""/>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
height: 100%;
}
body {
width: auto;
height: 100%;
}
.panel {
width: auto;
height: 100%;
float: left;
}
.panel img {
width: auto;
height: 100%;
z-index: -1;
}
You can also see it at this jsfiddle.
I floated the .panel to the left so it will display it all horizontally, but the container is not accomodating the width of all the panels, they just stack on top of each other.
Note: I don't want to have a fixed with, I need it to be responsive.
Here's an example of what I want to accomplish (jsfiddle).
As you can see there's no vertical scrollbar only the horizontal scrollbar is showing and when you resize the viewport the images adjust its width and height and keeps its aspect ratio.
Here's an update of your original fiddle:
http://jsfiddle.net/rsPRz/45/
Trying to stay as close to your original code as possible...
HTML
<html>
<body>
<img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg"
/><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-2.jpg"
/><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg"
/><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg"
/><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-2.jpg"/>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
height: 100%;
}
body {
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
img {
display: inline-block;
}
I think you need to keep all of them in a parent div whose width and height will be equal to the window width and height
The example you have shown is working fine because it has single image. When you are using multiple images/div you should divide the width equally for the div and give max-width:100% to the image in it.
I have used only 4 divs for example. Check this demo http://jsfiddle.net/rsPRz/34/
With a div.container and a little help of jQuery you might get along.
Updated link: http://jsfiddle.net/rsPRz/37/
widthSum = 0;
$('.panel img').each(function() {
widthSum += $(this).width();
});
$('.container').width(widthSum);
Is this a possible solution for you?