I am aware of the image resizing technic of changing image proportions based on width:
img{
max-width: 100%;
height: auto;
}
I need to do the same thing only based on the height of the parent, not the width. I have tried the following with no effect:
img{
width: auto;
max-height: 100%;
}
I hope I explaining this well enough.
Please help :)
max-height will only restrict the height to be less than the given value.
If you want it to be the same as its parent.. give it as height: 100%
hence this should work:
CSS:
img{
height: 100%; // changed max-height to height here
width: auto; // this is optional
}
You cannot effectively base it on the height using standard css techniques, but you can make the height relate directly to the width of the image for a more flexible layout. Try this:
img {
position: relative;
width: 50%; /* desired width */
}
img:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
i have tried this and it worked .
<div class="parent">
<img src="http://searchengineland.com/figz/wp-content/seloads/2014/07/google-logo-sign-1920-600x337.jpg" alt="..." />
</div>
.parent {
width: 100%;
height: 180px;
overflow: hidden;
}
see it here
https://jsfiddle.net/shuhad/vaduvrno/
Related
I have been trying to figure out how can I adjust image width and height so that it does not stretch plus, its only lower portion shows. I have managed to adjust it, but i dont know how to show the only lower portion. For reference , i want to do something like we do in background-image background-position: center;. This is my code so far.
<div id="featured-banner" class="lazy-load song-image">
<img alt="featured img" src="images/U1NbAmCyHljBGOOHH28bSve3wBk9Fkjb.jpg">
</div>
CSS
.song-image {
width: 100%;
height: 412px;
overflow: hidden;
}
#featured-banner img {
display: inline-block;
width: 100%;
margin-top: 0px;
padding: 0px 15px 15px;
}
You could try using the object-fit and object-position css properties.
Good CSS Tricks article on this.
I created a plunker as i understand your issue, check this and let me know that it is what you want. Here is the link - https://plnkr.co/edit/50rZCpPTFKOR0g6QCnZf?p=preview
div{
width: 500px;
overflow: hidden;
height: 200px;
position: relative;
}
div img{
width: 100%;
position: absolute;
bottom:0;
}
My apple-pie-icons image in CSS is not responding to any height attribute. It responds to width, but not height.
Could I be including it in the wrong div?
I've tried using pixels and height percentages - no response.
What am I doing wrong?
HTML
`<div class="container">
<div>
<div>
<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">
<h1>Apple Pie</h1>
</div>
<div id="description-container">
<div id="Apple-pies">
This was my grandmother's apple pie recipe. I have never seen another one
quite like it. It will always be my favorite and has won me several first place
prizes in local competitions. I hope it becomes one of your favorites as well!
</div>
<div class="apple-pie-icons">
<img src="images/recipe-info.png">
</div>
</div>
</div>
`
CSS
* {
font-family: Arial, Verdana, monospace;
}
.container {
width: 80%;
}
img {
position: relative;
width: 100%;
height: 500px;
}
h1 {
position: absolute;
top: 175px;
color: white;
width: 100%;
left: 32%;
font-size: 300%;
}
#description-container{
width: 650px;
height: 800px;
margin: 50px 200px 0px 200px;
}
#Apple-pies {
}
.apple-pie-icons{
display: inline-block;
height: 100px;
float: left;
width: 80%;
}
The icon is an image, and your CSS is defined as
img {
position: relative;
width: 100%;
height: 500px;
}
If you want to change the height, you can either change the height attribute there, or give the image a class and change the height that way (change the image tag to <img class="apple-pie-image" src="images/recipe-info.png"> and style via .apple-pie-icons .apple-pie-image { height: 1000px; }), or set the height of the image itself to 100% and then change the height of the parent, which is .apple-pie-icons in this case.
You also have this image (<img src="images/apple-pie.jpg" alt="Apple Pie" styling="width: 100%; height: 400px">) which has an inlinewidth and height style in the tag. It's worth noting that this image will not respond to height or width styles defined in your CSS since the inline styling will overwrite any other CSS.
It's possible that your image is growing the div even though you don't want it to in order to maintain it's aspect ratio. Try adding a more specific class to limit the images size or inspect in your browser to see what is overriding the divs styles.
Try targeting the image itself with the height style.
Right now you're just setting a height to the wrapping div:
.apple-pie-icons {
display: inline-block;
height: 100px;
float: left;
width: 80%;
}
Try...
.apple-pie-icons img {
height: 100px;
max-width: 100%;
}
or something like
.apple-pie-icons img {
height: 100%;
width: auto;
}
Any way to specifically target the image within the div that you're wanting to style.
I have done this many times before but it doesn't seem to work now for whatever reason. I want the image to be the full the width of the container but it doesn't. Any ideas?
jsFiddle: http://jsfiddle.net/Lqffk1ak/
Code:
img {
max-width: 100%;
max-height: 100%;
}
div {
background: #ccc;
}
<div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
Just add width:100% to img
img {
width:100%
}
Looking at your class, what you should add is some CSS on the full-width class to make the img width 100%.
This way, only the images set as "full-width" will be forced 100%. The other one will keep the max-width rule of 100%, but won't be resized if they are smaller.
img {
max-width: 100%;
max-height: 100%;
}
.full-width {
width: 100%;
}
div {
background: #ccc;
}
<div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
Just make your image width 100%. Even you resize your container image will fit on it.
img{
width:100%;
}
You can check the updated fiddle here
Change the css :
div {
height: 100%;
}
img {
width: 100%;
min-height: 100%;
}
I know this isn't directly an answer to your question but generally speaking, upscaled images look quite nasty. A way people get past this is to have the image centered and then add a blurred version behind it.
Like this:
body {
margin: 0;
}
.image {
position: relative;
text-align: center;
overflow: hidden;
font-size: 0px;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg');
background-size: cover;
z-index: -1;
}
.blur {
filter: blur(10px);
}
<div class="image">
<div class="background-image blur"></div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
I hope you find this helpful.
Because your Image is has 600px; height, and the you have set max-width:100%. So max-width property will only work when the parent dive will be smaller then 600px;.
To make image to the containing div, you have to give set image's property 100%; that is .full-width {width: 100%;}
I have a div which contains an image
<div class="logo-wrapper">
<img src="img/logo.jpg">
</div>
and following CSS:
.logo-wrapper {
width: 197px;
height: 78px;
position: relative;
}
img {
bottom: 0;
display: block;
height: 100%; /* this */
width: 100%; /* or this, depending on image ratio */
margin: auto;
position: absolute;
top: 0
}
The image inside .logo-wrapper is generated dynamically and each has a different ratio. What I intend to do, is to fill the img whether in the height or width of its parent depending on the dimensions of the image. I could do that with an background image instead, but I don't want to have trouble with old IE's. So does anyone have a solution that the img takes whether height or width, depending on its ratio?
If the image is bigger than .logo-wrapper, you can use
img {
max-height: 100%;
max-width: 100%;
}
If not, it won't grow, but this way you won't have a blurred image.
I have a div that contains an image. I want the image to resize with the div, but I do not want the image to ever have a height greater than 480px. I will post what I have below. It resizes with the div correctly, but it does not obey the max-height. If I move the mx height to the img css it does, but it will not resize then. I'm sure its something simple, but I can't seem to get it.
.feature_image {
max-height:480px
}
.feature_image img{
height: 100%;
width: 100%;
}
And here is the HTML
<div class="feature_image">
<img src="img/main-featured-image.png"/>
</div>
Have you tried putting a display:block?
Full CSS would look like:
.feature_image img {height: 100%; width: 100%; display:block;}
The reason behind your issue is that you did not specify the width of the container but, in the same time, you set a width: 100%; for the image.
I tested this with and it works just fine:
.feature_image {
height: 480px;
width: 480px;
}
.feature_image img{
height: 100%;
width: 100%;
}
This solution is good for small images, however it causes large images to distort, but there are solutions to overcome it.
You need to specify not only max-height; but also height in order to use height 100% for the image! :) CSS has no idea what 100% of to inherit. I hope you get it.
.feature_image {
max-height:480px;
height: 480px;
}
.feature_image img{
height: 100%;
width: 100%;
}
You need width:auto;
.feature_image img{
max-height:480px;
width: auto;
}
http://jsfiddle.net/8qLeE/51/