I am using the following code in html to display and image. I want it to 'scale to fill' where the height is the browser height and the width scales based on the height. I want to hide all overflow to prevent the div that follows from losing its content. This is the code I am trying to use:
<div id="image1">
<img src="http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU"/>
<style>
#image1{
overflow: hidden;
width: auto
height: 100vh;
}
</style>
</div>
If anyone has any ideas then that would be great.
Thanks
Change the width to 100% and the height to auto. Then redefine the img style and move the two properties there.
#image1 {
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
I dont know if i exactly know what you mean, but try to set your width to 100%, that should cover the div.
Remove the overflow by moving overflow: hidden; to a redefined body style.
For the 'scale to fill' part of your problem, add img to your #image1 style so that the image is affected by the style and not the div itself. Set the width to 100% and the height to auto so that the image width is the same as the browser's, and the image height adjusts automatically and proportionally on window resize.
body {
overflow: hidden;
}
#image1 img {
width: 100%;
height: auto;
}
Related
Setting the width of an <img> to 100vw causes a horizontal scrollbar to appear on the bottom of the viewport, and the only working solution I have found to get rid of the latter is to use overflow-y: overlay;. However, I have read that this solution isn't optimal. What's a better alternative?
body {
margin: 0;
overflow-y: overlay;
}
The horizontal scroll had come up because this is only an issue on windows. On Mac or Android the scrollbars are placed on top of the content and disappear once you're done scrolling so they don't affect the view width.
If max-width: 100% is the width of the viewport without scrollbars, then you didn't need 100vw in the first place.
You could just have use width: 100% because the element doesn't have any positioned ancestor, so its reference is the body.
A simple solution in your case is by giving max-width: 100%.
HTML would be like:
<div class="box">
.
.
.
</div>
Use this CSS:
html, body {
margin: 0;
padding: 0
}
.box {
width: 100vw;
max-width:100%; // This is very Important.
height: 100vh;
}
Scrollbars are included in the vw and vh so the scroll will be added to allow you to see beyond viewport. You can set max-width: 100% to remove scrollbar.
width: 100vw;
max-width :100%
add:
div{
width:100vw;
height:100vh;
background-color:blue;
}
*{
margin:0;
padding:0;
}
<div></div>
this will remove default margin and padding
I have the following piece of code:
.goplots {
height: auto;
width: auto;
max-height: 50px;
float: left;
}
and this HTML code mixted with a MediaWiki image:
<div class="goplots">
[[File:{{PAGENAME}}-CC.png|Cellular components]]
</div>
The problem is that the image is resized only when modifying the width value. It does not apply the height or max-height. I tried everything without success. What is going on?
Add this
.goplots img {
max-height: 100%;
}
You need to apply max-height to the contained img as well, this will make it shrink in height if necessary while keeping its proportions to fit in its container .goplots.
I have an image. This image should have 100% height. So, in my CSS, I defined height: 100%. The problem is the respective width, since this image is a panorama, it will certainly exceed the viewport dimensions. I don't want this to happen. Is there a way like overflow: hidden to completely hide the portion of the image after the maximum viewport width.
HTML
<div id="image">
<img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/>
</div>
CSS
#image {
height: 100%;
}
Here's the fiddle as well.
http://jsfiddle.net/AH3Hd/
Add this CSS to your div. You need to give it a width or it will just auto adjust to whatever its contents are.
div {
width:100%;
overflow:hidden;
}
http://jsfiddle.net/AH3Hd/4/
To use overflow:hidden;, you need to specify a width to the div, otherwise the browser will not know when to hide. I edited your fiddle to show that:
#image {
height: 100%;
width: 100%;
overflow: hidden;
}
http://jsfiddle.net/AH3Hd/6/
You could do something like this:
#image {
overflow: hidden;
height:300px; // Depends on the size you want
width:300px;
}
#image img{
height:100%;
}
Here's the fiddle: http://jsfiddle.net/jwvanveelen/AH3Hd/7/
I have a parent div with a max height/width set. I was wondering if it's possible to set the two child divs to automatically adjust their height based on a percentage using just CSS?
HTML:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
CSS:
html, body {
height: 100%;
width: 100%:
}
#parent {
max-width: 400px;
max-height: 600px;
}
#top {
height: 30%;
}
#bottom {
height: 70%;
}
The intended implementation of this would be for a mobile display that fills the screen height proportionally without forcing a vertical scroll.
EDIT:
I now realize that height percentages of the parent will work if you have a fixed parent height. The question still stands as to whether there is a way just using CSS to allow for a flexible height that matches the screen size. It's seems like this will not be possible only using CSS and require JS intervention.
Theres nothing wrong with your code. Just adding a 100% height as well as width to the divs yields what you want. The max-width/height doesn't force any values (leaves height/width at auto). Here is a working fiddle:
http://jsfiddle.net/b6HVa/
#parent {
width: 100%;
height: 100%;
max-height: 600px;
max-witdh: 400px;
}
I think you are doing right, if anything going wrong, please show a demo. Or try to set
#top{max-height: 30%;}
#bottom{max-height: 70%;}
Or add min-height: {some value}px; to your div.
I'm trying to scale images to the height of their parent which has a percentage height of its parent. This works as expected except in Chrome where the image won't scale its width proportionally once the height is reduced below the size at which it was first rendered. Any ideas on how to fix this?
<div>
<img src="http://placehold.it/100x100" alt="">
</div>
and the css:
html, body {
height: 100%;
margin: 0;
}
div {
height: 70%;
background-color: red;
}
img {
height: 100%;
width: auto;
}
JSFiddle
Removing the width property fixes this:
img {
height: 100%;
}
I'm not sure why this happens, but I'm guessing that making the width always at auto would fallback to the original width when the image is scaled down (this doesn't happen in most cases I've tried, but a certain combination might trigger it to happen that way). Not sure if it's by design or not, but I'll go ahead and try to report this somewhere.
Fiddle
Try using display: block; to make Chrome scale the image below the rendering-size:
display: block;
min-height: 100%;
height: 100%;
width: auto;