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
Related
For my website http://www.suemaisano.com/, I want to increase the homepage slider BACKGROUND IMAGE height (different than slider image, I did not set any slider image, only background image). I set the class as of the slider as homeSlider, and this is the code I put in the child CSS
.homeSlider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 1080px !important;}
However, the background image height did not change when I manipulated the min-height. The actual image sizes are ~1920x1080. Anything I need to change the code to make the min height work?
Thanks in advance!
Assuming the image goes into the div where the text appears, the below should give you the height that you are aiming for.
.et_pb_slide_content {height: 1080px; }
You need to set height on description container
.homeSlider .et_pb_slide_description {
min-height: 1080px;
}
I have an image something like below.
<img src="file.jpg" />
Below is the css code
img {
max-width: 100%;
height: auto;
}
Can anyone explain me on how does this css code make the images responsive, I mean scale it perfectly. I want to know the working behind this css code.
When your parent width is smaller than width of image, image width will take 100% of parent width.
If parent width is bigger than image width, image width will stay original.
Same with max-height. Also min-width/min-height will ensure that width/height will not be smaller than specified.
height: auto; will preserve aspect ratio for image. If you set both max-height and max-width or set height to specific size than image will be stretched
When you apply max-width:100%; to any element then that perticular element could have maximum 100% width of its parent, thus it can give you gaurantee that child will never go out of parent's bounds.
Thus if parent has suffitient width then child is shown in it's original size, otherwise it's width is matched to the parent. Thus it make our layout responsive.
Here is example : http://jsfiddle.net/xxn2hfuL/
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%;
}
I have two containers (main-container and sub-container). Body, HTML and main-container have classes of 100% height whereas sub-container fixed in 1000px. Main-container should be fit with 100% height in the whole screen even sub-container is small or large. Now problem is, main-container is not increasing its height according to sub-container height. Please check the example below to understand my requirement.
http://jsfiddle.net/awaises/dLeHL/
Really appreciate your help.
Thanks
change height:100%; to min-height:100%; in .main-container: http://jsfiddle.net/dLeHL/3/
EDIT:
Percentage heights rules are explained here:
Percentage Heights If the height of an element is set to a percentage,
it needs for its parent element to have a set height. In other words,
the height of the parent element can't be set to auto. Like many
aspects of CSS, this is a bit confusing at first.
Is this what you're trying to achieve?
I change the width of the .sub-container in order to be in % like the .main-container.
CSS markup:
html, body {
height:100%
}
.main-container {
height:100%;
background:red;
}
.sub-container {
height:100%;
width:75%;
margin:0 auto;
background:blue;
}
Hope it helps!
You don't need to set the height for the .main-container (by default it will expand to the size of the child container). By setting the height to 100% you are forcing it to be the height of the screen and no more. So just change it to:
.main-container { background:red; }
If you need the main container to always be at least the height of the screen, use #Helstein's suggestion of setting the min-height to 100% while removing the height setting.
.. expecting the picture to get "cropped" at the top and bottom. I only want it to fit the width 100%, and wish to become bigger than the height, but not leave the certain container.
How is that done?
Your question is a bit vauge if you meant you wanted an img to stretch to the full width off a container but the height too get cut off then you want something like this.
.container{
width:300px;
height:300px;
overflow:hidden;
display:block;}
.container img{
width:100%;
vertical-align:middle;
}
Just set the container's css overflow property to hidden, give it a fixed size, put your image inside with a fixed width, and done :)
Well, almost done. To get it cropped at the top and bottom, you need to get the image vertically centered in the box. One hack to achieve this is to have tiny text nodes on either side of the image, having a line-height the same as the container div height. Giving the image vertical-align:middle should center it vertically within your div.