I have an image at the top. I want it to be wide from left to right. Despite all kinds of change in the css settings, I can't get the full height of the image, but full width is working.
The size of the image is 1920 x 400 px, but when I measure the image, the height is only 345 px. Is it about proportions or what? I have tested to change the width of the image, but I still get the height of 345 px!
My questions are: Can I get full height of the image and what is the optimal size in width when using a wide image? I guess it's not necessary tp have 1920.
HTML:
<div id="start">
<img class="start" src="bilderGuide/bilderLayout/start.jpg" />
</div>
My CSS:
#start
{
width: 100%;
height: auto;
}
img.start
{
width: 100%;
height: 100%;
}
Do you mean something like this?
jsFiddle
I just set the css property's off the image to
min-height: 100%;
min-width: 100%;
So it fills the page.
Or isnt that what you mean?
EDIT:
New jsFiddle
When you define a 100% size in an element wrapped inside another, it can occupy it's parent size. The 100% width in this case, as it is an image, will take all #start available width and proportionally adjust it's height (at least in most browsers).
There are a few tricks you can use, depending on the result you want:
#start {width:960px;overflow:hidden;margin:0 auto;}
img.start {/*reset max-min height if any*/ max-height:none;max-width:none;}
Image, then, will use it's real height and get masked with the #start width, since any overflow is hidden.
The idea, in general, is to have a wrapper element of the image and then play with the image css attributes depending on the result you want.
As for the optimal size, I would guess even a smaller width (1600px or so) would be enough but it all depends on the result you want.
Edit:
For a standard height, full width image you may use:
#start {width:100%;overflow:hidden;margin:0 auto;height:300px;}
img.start {min-height:300px;min-width:100%}
jsfiddle link
Edit 2:
To get a full width and full height image masked, you'll need to absolute - position the wrapper of the images.
#start {width:100%;height:100%;overflow:hidden;margin:0;padding:0;position:absolute;}
img.start {min-height:100%;min-width:100%;}
another fiddle
Try this
#start {
width:100%;
height:100%;
display:inline-block;
}
img.start {
min-height:100%;
min-width:100%;
}
Related
I have an image which width should be as large as possible and I want it's height to not exceed the height of the parent while also maintaining the aspect ratio of 16:9. The issue right now is, it works well till the screen size is 1591px, if it gets bigger than that, the height exceeds and the vertical scroll bar appears. I don't want that behavior. How can I achieve that?
the scrollBar appears because of the overflow you can do 2 things
use the "overflow: hidden;"
body{
overflow: hidden;
}
you can use max-width to determine the max-width of the element and set it on both of the elements
I hope it was helpful 😁
UPDATE: the original answer assumed from the question that the image was an HTML img. The solution was to set width to 100% [of its container] and height to 70vh and use object-fit.
However, it is not an img it is a canvas.
The required aspect ratio is known to be 16 / 9. This snippet therefore sets the max-width to 100% (of whatever is the container) and the max-height to 70vh.
This way there can never be any overflow and the canvas will be as big as it can be within those constraints.
body {
width: 100vw;
margin: 0;
}
canvas {
max-width: 100%;
max-height: 70vh;
aspect-ratio: 16 / 9;
background: green;
}
<canvas width="1600" height="900"></canvas>
I can't make the header image's height bigger. I found some CSS that made the container height bigger. But every time I change the photo out, it is still the original height: 75px;.
.container {
width:100%;
height:200px;
float:left;
margin-top:2px;
}
thml
html
What am I doing wrong?
From the screenshot i did not see any image element. If you want the image to to follow have a fixed height, you can set a height to the image itself, but if you want the image to follow the container's height, then u need to give a height to the direct container of the image, at the same time give a height to the image, 100% if you want the image to follow the height of the container.
From the code you provided. your .container has a height of 200px. If the image is inside this container, and you wish to make the image exactly 200px as the .container, then you need to add .container img{height:100%} to the image.
Try this CSS rule:
header {
min-height: 50% !important;
}
There should be something below the image that is blocking your height.
Make sure to check from the inspect element
Want to have an image file appear in a fixed position on the page.
Wrote the following code:
<style>
.hovering-image{
position: fixed;
left: 70%;
top:20%;
height: 20%;
width 10%;
}
</style>
<body>
<div class="hovering-image">
<img src="whatever.jpg">
</div>
</body>
However, the image appears elongated and changes proportions as the window resizes. Is there a better way to have the image show up in a fixed location and scale as the window resizes without distorting?
Your image changes proportions because you set both the width and height in respect with the window size. Set only the width (or only the height).
Also, you can use max-width or max-height to specify the maximum dimensions you want your image to have (and min-width / min-height to specify the minimum dimensions)
Try giving only the left and right margins. Giving all the parameters cause your image to distort.
Take this as a reference.
http://www.ehow.com/how_12064024_overlay-image-fixed-position-website.html
If you want to re-size image according to the window use :
img {
max-width:100%;
}
if you don't want to re-size image give the width in px.
Is there any way to get the following effect using CSS?
When container's width is less than image's original width, set image's width to 100% of container's width.
When container's width is larger than image's original width, set image's width to it's original wdith.
May be you can do like this:
for example:
img{
width:100%;
height:auto;
max-width:400px;
}
check this http://jsfiddle.net/aqh2r/
I found that the following CSS code could achieve the goal. But according to CSS Standard, when the value of max-width is percentage, it is "calculated with respect to the width of the generated box's containing block". According to my understanding, set max-width to 100% should take no effect, but it seems wrong.
img{
width: auto;
max-width: 100%;
}
The code is tested in Firefox 12 and IE 9. See http://jsfiddle.net/EnZEP/
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size