Seems so simple, but ...
scale image size with window size?
1)create a container for the image = entire window width, so container grows with window width
2)slap image inside the container
3)scale image based on % of the width of the container
HTML
<div class="imgEnclosure">
<img class="validatedImage"
src="1776_Support/images/check_mark.png" alt="thisImage"
onclick="SwapImages(this); return false" />
</div>
CSS
.imgEnclosure {
width: 100%;
}
.validatedImage {
/* original size (w,h) = 220px by 108px */
/*
1.0em = font-size: 24px from html Selector
so ... original size = 9.167em by 4.500em
*/
max-width: 30%;
min-width: 10%;
height: auto;
}
The image shows the same size no matter how I change the browser window width.
Good Grief ...
Instead of:
max-width: 30%;
min-width: 10%;
Use
width: 30%;
Honestly, I could not ask for a simpler answer ... even though I do not understand why the max-, min-width response does not work?
I am not sure as to why it didn't work , I believe it could be an error in styling in the parent element or forced styling from parent elements that transferred to the child element .
Did you try placing the
max-width: 30%; min-width: 10%;
in your .imgEnclosure and not the img class itself? Maybe that would have worked too. I normally place positional styles in parent elements so that child elements would easily inherit the styling properties.
Regardless: do check out this as it might answer your question! hope this helped :)
Related
I am trying to make an image resizable.
I have a specific height for this image: height: 100% (inside a container) and a width: auto; (i want the width to be adapted to the height about the natural image size).
Everything works fine when i access the page, but when i resize the window, the height is correctly resized, but the width keeps its initial value, i want it to be proportional (like when i access the page for the first time) to the height.
Is there a way to do it in CSS ? If not, what is the more optimize solution ?
Here is an illustration in code:
HTML
<div class="container">
<img alt="test" src="/img/test.png">
</div>
CSS
.container {
height: 100px;
width: 100%;
}
.container img {
height: 100%;
width: auto; //i need it to be adapted to each height about the natural image's dimensions
}
UPDATE
Here is a jsfiddle
http://jsfiddle.net/CRGj6/1/
Sometime it works sometime it doesn't...
window resize affects only the width of the element but not the height. It is kinda make sense because if you resize the height, more content is scrollable that means don't do anything to width but to increase the scrollbar length (so more content to be scrolled). Assuming that you want to preserve the aspect ratio of the image,
.wrapper .container img {
position: relative;
height: auto;
width: 100%;
}
would be the solution to this problem.
I am trying to set the width of the .full_height_div element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (.set_rectangle_height) is already a div with height relative to the page width. Obviously, as the page is resized the divs on the page will resize, so i cannot set a fixed width in px for the .full_height_div child.
So .rectangle and .set_rectangle_height make up the parent container which has a width as a percentage of the page and a height relative to this width. See here for an explanation for this method.
But the problem is that then I want to place a div inside the parent with height: 100% and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.
here is my failed attempt:
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
So, this is what the above incorrect markup looks like:
And this is what i want it to look like:
I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.
you have to use javascript for that. If I understood you, you want a perfect blue square. Use
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
here is a jsfiddle: http://jsfiddle.net/a8kxu/
Edit: instead of doing padding-bottom: 30% do height: 70% instead. Here is another fiddle: http://jsfiddle.net/a8kxu/1/
Edit #2: Sorry, but you cant use css to do this. Its not powerful enough
If i understand you correctly
you can do
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}
I've created a really simple modal that allows the content to decrease or expand without running off the page - always leaving 10% margin on the top and bottom. When the page isn't tall enough to contain all the modal content, the entire modal becomes scrollable.
See jsfiddle here
Is it possible, using only CSS, to replicate this behavior but only have the modal body be scrollable, so the header is always fixed. I've tried a few things, but haven't come up with the solution yet. Making the header position: fixed almost works, I have to reposition it over the modal box and then try to add padding to the body so the content is visible under the header, which doesn't budge the scrollbars down. I always prefer to exhaust all the css alternatives before I bind some js to window resize and manually manipulate the body height.
This might be late, but I had to solve a similar issue of fixed header, fluid height, fluid width.
This is how I tackled the issue:
Give your elements a border-box box-sizing. Use a wrapper to center and create a bounding box. This can be a fluid one with min-width and max-width + percentages.
Give your content element an overflow-y of auto and a max-height of 100%;
Use box-sizing:border-box;
The complete code should be something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.wrap {
position: relative;
margin: 0 auto;
display: block;
width: 90%;
/* Change the max-width value on a media query breakpoint to make this example more "responsive" */
max-width: 500px;
height: 90%;
padding: 30px;
}
.modal header {
height: 30px;
padding: 0;
color: #FFF;
background-color: #007;
}
.modal .body {
background-color: #FFF;
max-height: 100%;
overflow-y: auto;
}
http://jsfiddle.net/mariomc/EhR7r/
Applying the max-height and overflow-y settings to .body rather than to .wrap...?
Edit 1:
Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height or px margins).
Edit 2:
Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).
On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.
It's a clumsy solution, but it's the only one that turned up without using JavaScript.
Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
So, I am trying to set an image to be 100% of the height and width of the html element (really the browser window is what I'm going for). I have the CSS set as
html{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
z-index: 0%;
}
And the width behaves right, but the height does not change. I tried setting it to height: 2% and it stayed the same height. I don't want to use px to set the height because I want this to work on mobile devices, but HEIGHT, Y U NO WORK?
You also need to set height: 100% on body.
Going with your exact example, you could do:
html, body, img {
width: 100%;
height: 100%;
}
However, it looks like you're possibly trying to get a fullscreen background image (because you used z-index - by the way z-index does not use %, just a plain number).
In that case, you should instead use one of the methods from here:
http://css-tricks.com/perfect-full-page-background-image/
That is because the image element is not the direct child of the html element. You have to specify the height for the body element also, and any other element containing the image element.