my problem is quite simple but I still cannot find the answer for this one...
Say we have two containers containing an Image.
<div id="containera">
<div id="containerb">
<img id="imagea" src="image.jpg"/>
</div></div>
and we have something like
#containera { width: 50%; height: 50%; background-color:blue;}
#containerb { width: 80%; height: 80%; background-color:red;}
#imagea { height:100%; width:auto;}
Problem is: The Image height is FULL SCREEN height and NOT 100% containerb (80% of 50% screenheight).
I want the Image to be 100% height of containerb, not 100% height of the screen.
Weird: If i work with "width", the width is scaled depending on the width of containerb.
Can I somehow restrict the height of the containers so they dont scale the image to 100% screenheight? tried max-height in tons of variations but it did not work in any way...
Thanks, if you have any idea how i could solve this..
Add html, body {width:100%; height:100%;}
see working fiddle here: http://jsfiddle.net/A9b6Y/
Related
I am leaning Angular 4 and I am creating an app with Bootstrap , I am using the grid system, but I am not ale to set any height to the columns of the grid.
I have tried all solutions available on internet setting overflow to hidden at container and then setting clear : both on column. Not able to make it work
<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
Column 2
</div>
</div>
</div>
.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}
JsFiddle link link
Please let me know!!!
The problem is that you are trying to set height with percentage.
The height of a block element (div is a block element) depends on the height of the content.
If you specify a percentage, that will always respect the height of the content, no matter what.
Change the height to pixels and you will control the height of the element.
See this answer for more information
.container {
display: inline-block;
width: 100%;
height: 100%;
margin: auto;
overflow:hidden;
}
.row {
overflow:hidden;
width:100%;
height:25%;
}
.col-lg-12 {
float: left;
width: 10%;
height: 350px; -> height in pixels, not in percent
clear: both;
}
Does defining the height of a parent container work? (Using vh units to define its height, as illustrated below, should make it responsive.)
It's hard to tell from this snippet but in your full code, do you define the height of an element that contains the .container div? If not, the 90% that you've set as .container's height won't work, because there won't be a defined context for exactly what you're using to create your height: 90%.
If you add the height to your parent element -- and you can see this in play in this example on Codepen: https://codepen.io/msummers40/pen/EobqOo -- things take on more definition/greater heights. On that Codepen page, I just added a new parent element and a corresponding CSS selector:
.container-of-container {
height: 100vh;
width: 100%;
}
With the .container-of-container div's height set to 100vh, .container's height becomes 90% of that. In turn, your two rows are each 25% of .container's height.
In any case, if you set the height (using px, em, vh etc) of the parent element of .container, you should see the resizing take place more as you're expecting.
I load images dynamically into my webpage and make them responsive:
<div id="images"><img id="dynamic_img" src=""/></div>
css:
#images{
height: 80%;
width: 30%
}
img{
max-height: auto
max-width:100%
}
Problem now is, that the images have different heights and widths. Now this works when the width of an image is longer than its height but not the other way around. (in this case max-height would be 100% and max-width: auto
Is this possible to switch these two values according to the image loaded in CSS or do I need to use JS for that?
Thanks in advance
Here you have an example where images are fitted horizontal and vertically.
I used
img {
max-width: 100%;
max-height: 100%;
}
Here you are: https://jsfiddle.net/jormaechea/j219ucnc/1/
Update
The key to achieve this is to set
html, body {
height: 100%;
}
<div id="images"><img class="img" src="" alt="" /></div>
.img
{
width=100%;
}
your div should have width=100% for example.
don't use max-width
you can set the #images div also a with of 80% - it will be responsive and the image refits to the divs width
This may come off as basic, but I'm new to img tags. On this website morningsignout.com, I want to resize the images so that they're smaller. I learned about editing their img tag properties in firebug with "height="40%"", but it doesn't seem to work on any of the article's main images. How do I resize them in html?
I'm presuming that you want to resize the image according to the height of the view window. To do that, you can use the vh unit in css. 100 vh units is the height of the screen that the user is viewing the page on.
Here's an example that sets all the imgs to 40% of the viewport height
img {
height: 40vh;
}
Height with percents it's a little bit tricky because the parent must have height too. You have 2 options: Set the parent's height too. B. Set the height by pixels.
.first {
height: 450px;
}
.first img {
height:50%;
}
.second img {
height:200px;
}
<div class="first">
<img src="http://i.stack.imgur.com/33oYG.jpg" />
</div>
<div class="second">
<img src="http://i.stack.imgur.com/33oYG.jpg" />
</div>
I have a div with a fixed aspect-ratio that scales larger, if the wrapper becomes larger.
HTML:
<div class="wrapper">
<div class = "aspect_ratio_3-2">
</div>
</div>
CSS:
.aspect_ratio_3-2 {
width:100%;
background: rgba(255,0,0,0.8);
}
.aspect_ratio_3-2:after{
content:'';
display:block;
padding-top: 50%;
}
.wrapper{
width: 20%;
height: 90%;
background: black;
}
You can see it in this fiddle
If the aspect ratio of the wrapper is bigger than the aspect ratio of the div, the div exceeds the wrapper (too high).
I'm searching for a CSS only method to scale the div as large as possible, without exceeding the wrapper. The width and height of the wrapper is not known!
Is there something similar to
background-size: contain
just for divs? Solving this problem with javascript is quite easy, but I want to do it with css only.
I am trying to resize image using css only.
It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.
I have created a fiddle as demo so that you can see what's going on.
<div class="resize_image">
<img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>
Full Screen http://jsfiddle.net/squidraj/sbnvwped/embedded/result/
Demo : http://jsfiddle.net/squidraj/sbnvwped/
You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo
<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>
#resize{
width:250px;
height:250px;
}
#resize:hover {
width:500px;
height:500px;}
The following code resizes the image proportionally to the width of the page (or more correctly, the container element), but if the height of the image then becomes more than 485px then the width with will be proportional to that. To chop the image, put another div around it with the right width and height, and set overflow to hidden, and remove the max-height from the image itself.
.resize_image img {
display: block;
height: auto;
max-height: 485px;
max-width: 1440px;
width: 100%;
}
Hope this helps.
Try this:
img.resize{
width:540px; /* you can use % */
height: auto;
}