I have an image nested inside a series of <div> tags. I have the image in height: 100%; and width: auto;. When I resize the height of my browser, the image changes its size but somehow the parent div doesn't change in IE and Edge (fine for all other browsers).
Here is the normal render on chrome when you resize your browser:
Here is the problem in IE when you resize:
Or like this:
I'm trying to resize the parent in relation with the image's width. The parent container just doesn't resize. Here is my <div> structure:
body,
html {
margin: 0;
padding: 0;
background-color: #fff;
height: 100%;
}
#photo-gallery {
position: relative;
height: 100%;
padding: 100px;
box-sizing: border-box;
}
.project {
position: relative;
display: inline-block;
height: 100%;
max-height: 600px;
border: solid 18px #333;
box-sizing: border-box;
}
img {
height: 100%;
box-sizing: border-box;
}
<div id="photo-gallery">
<div class="project">
<img src="img/landscape1.jpg">
</div>
</div>
Here is my CodePen (open in IE or Edge)
Right now I got it working with JavaScript by detecting the width of the image and giving it to the immediate parent, but that's really far from ideal... am I missing something? The strange thing is, if you resize your window and then reload the page, the image shows with the right size/proportions until you resize the browser again.
Related
One code sample code sample show a image at its original size with scrollbars while the other proportionally scales the image to fit inside it parent.
I want to initially show the image proportionally resized and after the user does something (click, hover, etc...) the image is shown at full size with scrollbars. When the user stops doing an action the image returns.
Essentially what I want to do is toggle between the two states without messing up the page's layout.
My images can be both landscape and portrait in nature with dimensions of up to 5184 pixels to show detail, although most are cropped to 2500 to 4100.
Restrictions:
No scripts of any kind are permitted - they will be stripped out.
No <a> links permitted - they will be stripped.
No active content of any kind - will be stripped out.
I cannot insert the actual widths and heights of images into the <img> tag as I am using a program to generate a html template and it does not have access to those dimensions.
I'd like the divisions in which the images are seen to resize to the user's screen, thus the 96vh code above (not sure if this is the right technique).
So far I have tried using various schemes using divisions with a hidden checkbox toggle and have tried using a <ul> list, but I can't seem to get everything to work correctly. I typically can get one version of the image to work, but it typically breaks how the other version of the image is viewed or worse yet, it messes up the page layout.
Show image at full size with scrollbars inside division:
<center>
<div class="gsimagewrapper">
<img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773165-95808.jpg">
</div>
<div class="gsimagewrapper">
<img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773167-95809.jpg">
</div>
</center>
.gsimagewrapper {
position: relative;
width: 96vw;
height: 96vh;
overflow: auto;
margin: 1vh 0px;
padding: 0px;
box-sizing: border-box;
}
.gsimage {
max-width: none;
height: auto;
}
Show scaled down version of image inside division:
.gsimagewrapper {
position: relative;
width: 96vw;
height: 96vh;
overflow: auto;
margin: 1vh 0px;
padding: 0px;
box-sizing: border-box;
}
.gsimage {
width: 100%;
height: auto;
}
Inspired by this answer: Can I have an onclick effect in CSS?
You can try to use a checkbox as a button. This is the JSFiddle: https://jsfiddle.net/sxpgvj6z/
HTML
<center>
<div class="gsimagewrapper">
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">
<img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773165-95808.jpg">
</label>
</div>
</center>
CSS
#btnControl { display: none; }
.gsimagewrapper { position: relative; width: 96vw; height: 96vh; overflow: auto; margin: 1vh 0px; padding: 0px; box-sizing: border-box; }
.gsimage { max-width: none; height: auto; }
#btnControl:checked + label > img {
width: 100%;
height: auto;
}
I want to have a textarea that fills the most part of my screen. And I want it to resize properly when the browser window resizes. So I made the following CSS:
html, body {
height: 95%;
width: 98%;
margin: 10px;
}
textarea {
width: 95%;
height: 95%;
margin: auto;
resize: none;
}
but when I resize the browser window the right size works ok, but bottom part of the textarea will not obey my 95% rule. It shrinks until the bottom passes window bottom.
Researching I came up with another solution:
textarea {
position: fixed;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
width: 95%;
resize: none;
}
Now the bottom behaves okay but the right size has the same problem as bottom had in the previous solution.
How can I make the textbox resize properly on browser window resize ?
Please note that I'm not interested in manually resizing textarea element (note the resize: none rule). I want it to resize when browser window resizes. Another thing is that I don't care about the size of the text inside textarea. I should resize independently from the text.
I've created an example in this jsfiddle:
https://jsfiddle.net/1akykrg2/13/
Updated jsFiddle
*{
box-sizing:border-box; /* easier box-model calculations */
-webkit-box-sizing: border-box;
}
html, body {
height: 100%;
margin:0;
}
textarea {
position: fixed;
left:10px; top:10px;
width: calc(100vw - 20px); /* calc and viewport to the rescue */
height: calc(100vh - 20px);
resize: none;
}
<textarea></textarea>
I have a page with a just a header:
<body>
<div class="page">
<h1>This is the header</h1>
</div>
</body>
CSS is:
.page {
height: 297mm;
background-color: #0094ff;
position: relative;
overflow: hidden;
}
h1 {
margin: 0;
padding: 0;
}
When I try to print the page, the preview generates 2 pages. I just want it as a single page. So, what should be the height for the page class?
I just want the content to be printed on an A4 size page. How can I do it?
Reset margin, padding, height of html, body elements
By zeroing out the margin and padding and setting the height to 100%, you'll achieve full page coverage (no more, no less).
html, body {
margin: 0;
padding: 0;
height: 100%;
}
Update:
There is no need to specify a height for a particular page size in your CSS if you set the container element height to 100%.
If the page has more content than can fit on one printed page and you want to clip it, apply height: 100% and overflow: hidden to your container element — .page in this case.
.page {
height: 100%;
background-color: #0094ff;
overflow: hidden;
}
If you want to apply padding to the .page element and maintain your single-page clipping, you will need to apply box-sizing: border-box.
.page {
box-sizing: border-box;
padding: 1em;
height: 100%;
background-color: #0094ff;
overflow: hidden;
}
I want my images to resize as the window height changes while keeping the containing div shrink wrapping the image. I tried using:
<div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
display: inline-block;
}
img {
height: 100%;
width: auto;
}
But it doesn't seem to work as expected. The div doesn't shrink. It actually does once I play around with the css properties in debugger.
Here is the fiddle (try resizing the result panel)
Update:
Now this is strange. Since I first posted this question the browser behaviour changed. Originally (Chrome) when I resized the window the image would shrink proportionally as expected but the wrapping div would keep its original width. What happens now (Chrome update?) is that the image doesn't shrink horizontally, and the div also.
I tried it with the latest Safari and Firefox. Both shrink the image but keep original div width. So please be kind to check your solutions on other browsers as well.
Update #2:
The div has to stay of block type as I need to place other elements in the corners of the image.
I guess you'll have to resort to JavaScript:
$(window).on('resize', function (){
$('div').width($('img').width());
});
JSFIDDLE
You just have to keep your image max-height to be 100%. Thats it.
Here is the Working Solution
The HTML:
<div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
The CSS:
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
display: inline;
}
img {
max-height: 100%;
max-width: 100%;
height: 100%;
}
EDIT
Updated CSS for the img class to make the image fit the full div.
Here is the working solution for the edit.
img {
max-height: 100%;
max-width: 100%;
height: 100%;
display:block;
}
Hope this Helps.
I have had a bit of a go at your fiddle but I don't think browsers will change the width of a div based on the width of the image inside it changing its width, I have tried a few things but couldn't get it to work.
I can however suggest another approach to placing elements in the corners of your auto re-sizing image. Instead of placing these elements inside a div which is also holding the image, you could just float the image and float some div's with a fixed width to the right and the left of the image, and then make those div's cut into the image by setting some negative margins on them.
Here's an example jsFiddle demonstrating this approach. You'll see that the images stay in the corners of the main image when you resize the result window (and thereby changing the size of the main image).
HTML
<div class="right">
<img src="..." />
<img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
<img src="..." />
<img src="..." />
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
img {
height: 90%;
float: left;
}
div {
float: left;
width: 40px;
position: relative;
z-index: 1;
height: 90%;
}
div.left {
margin-left: -40px;
}
div.right {
margin-right: -40px;
}
div > img {
padding: 3px;
border: 2px dashed blue;
width: 30px;
height: 30px;
}
div > img:last-child {
bottom: 0px;
right: 0px;
position: absolute;
}
you want to give your image width to 100%. Use this.
img {
height: 100%;
width: 100%;
}
When you provide a width and height for the div in %, it resizes according to the page size. And the image size in % is relative to the div width and height. I have kept the div height at 90% of the available space and width at 50%. The image is at 90% both height and width, so that you can see the re-sizing of both image and div sections.
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
width:50%;
}
img {
height: 90%;
width: 90%;
}
You have to update your css written for image purpose
img {
max-height: 100%;
max-width:100%;
}
If I understood correctly, you want to resize image by height but keep proportional size?
If so, use this:
img {
height: 100%;
display: inline-block;
}
You might want to use display: block; as well, depending on your needs.
FIDDLE: http://jsfiddle.net/zhyv9/38/
I have updated the fiddle, with the Img tag self close that may cause error some times..,
and If the image have specified size height and width then it will also resize, and the corresponding div height increases/decrease as 90% when I zoom-in/zoom-out
I hope this is the answer, as I have understood wrapping and re-sizing,
Please reply if not working..
Adding this little hack worked for me. To my understanding it forces the browser to redraw/reflow its contents. Fiddle. I can't figure out why this isn't done automatically by the browser. Tested on Firefox, Chrome and Safari.
window.onresize = function() {
$(".thumb").each(function() {
this.style.display = "none";
this.offsetWidth;
this.style.display= "inline-block";
})
}
So I have 3 divs contained inside a containing div like such:
<div id="contain">
<div id="leftnav">
....
</div>
<div id="todo">
...
</div>
<div id="rightcontent">
....
</div>
</div>
The css is as follows:
div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
#contain {
width: 1000px;
background: #ffffff;
display: block;
min-height: 500px;
height: auto;
max-height: 1500px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#leftnav, #todo {
float: left;
width: 20%;
display: block;
overflow: hidden;
height: 100%;
padding: 10px;
position: absolute;
left: -200px;
bottom: 0;
}
#rightcontent {
float: right;
width: 100%;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
Now, the reason the #leftnav and #todo are positioned the way they are is because they are being animated to the right based upon their left value if the user clicks on the link, and the right content is just shown all the time. However, this is where the problem comes in.
I need the containing div to expand in height based upon the content in the #rightcontent div up to the max-height. As it stands, it is simply constantly keeping the height at 500px no matter what, and implementing scroll bars (which I do not want to have occur). Maybe I am approaching this all wrong, and putting an overflow: hidden on it still keeps it set to 500px no matter what.
I can provide more info if needed. Thanks in advance.
Looks like you have a problem with floats. When you float elements they break out normal rendering flow. Just as a test add float:left to your #contain div. You should see it expand to contain its children divs.
I generally try to avoid using floats for this very reason.