My header only has a height of 108px
This is how big my header is
But the image/logo I want to place is clearly bigger
When I remove the height limit in my CSS, this is how it looks like
how do I rescale my image to fit my header? I'm new to html and css and trying to learn to code, thank you in advance!
this is my html and css
header.top {
background - color: #157bea;
margin: 10px,10px, 0px, 10px;
height: 108px;
}
img.logowhite {
width: 100%;
height: 100%;
object-fit: 100%;
}
<header class = top>
<div class = logowhite>
<img src = images/logowhite.png>
</div>
</header>
Set the width CSS attribute to auto value as follows and set the height with the px value.
On your CSS, your header has got the fixed height 108px so it will be fine to define the height in pixel.
And currently, img tag is inside .logwhite selector so it is needed to replace img.logowhite to .logowhite img.
.logowhite img {
width: auto;
height: 108px;
}
Related
In my HTML code, I have a PNG image that I resized using CSS:
.adjust-image {
border:1px solid #021a40;
display: block;
width: auto;
max-width: 100%;
max-height: 1000px;
}
.img-container {
position: relative;
}
<div class= "img-container">
<img class = "adjust-image noselect fade-out" src="{{ s.photo.url }}">
</div>
Using the image's current size (with max-height), how can I crop the image as a percentage, instead of using px for height?
For instance, how can I get CSS written so that I can just designate something like: height: 34%?
The height property can only use a percentage if its parent has a fixed height. What you can do however is place the image as a background image. Then you can set the height to 0, and as long as the width of the image is 100%, then you can use padding-bottom of a percentage since that references the width of its parent. Weird I know. So an example:
.img {
width: 100%;
height: 0;
padding-bottom: 34%;
background-size: cover;
}
Of course, this may not be the best semantically, but it is a classic way to use aspect ratio in CSS. And once aspect-ratio is sufficiently supported, that will be a great option.
I have 2 div's named first and second and I have set the width and height of them as 100%
.first{
width : 100%;
height : 100%;
}
.second{
width : 100%;
height : 100%;
}
now I would like to add an image in each div. These images should fill in the entire div.
<img src="someimage.png" width="100%" height="100%"/>
My problem is the image should not be stretched it should be filled the entire screen. I have used img img-responsive classes to achieve this. The image is now getting filled without stretching but when resized it is getting resized uniformly and the height of it is also getting decreased hence the image's height is now not getting filled 100%. Is there any way to achieve width and height of an image to cover the entire screen without stretching and decreasing the height?
Check this out, and you should use width: 100% beside min-height: 100% but i recommend you to use background-image with background-size: cover
.first{
width : 100%;
height : 100%;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.first img {
width: 100%;
min-height: 100%;
}
<div class="first">
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/>
</div>
jsFiddle
I use imgLiquid this is a jQuery Plugin to resize images to fit in a container.
https://github.com/karacas/imgLiquid
It's super easy to use and light weight.
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.
When I set the background image at I have to give it a static size of div otherwise it will not display the background images. What is problem.....
I have this CSS:
.wrapper {
width: 1170px;
margin: 0 auto;
height: auto !important;
}
.main_div {
float: left;
width: 100%;
height: auto !important;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
width: 100%;
height: auto !important;
}
.header {
width: 100%;
background-image:url(file:///D|/HJ/ALL%20HTML%20TEMP/bootstrap/bootstrap/img/header_bg.jpg);
float:left;
}
The first comment is correct, I decided to create a little demo to explain this.
So if you take a look at the demo you can see we have the first div using background to place an image. This is fine and valid CSS but without a height and width how can the background be displayed?
Moving onto the second div, here we give the div with the background and height/width. Now the background has appeared. Because we have defined the height and width the background has room to display. A background cannot tell the element to be a certain size without you defining it.
And the last div, this has <img> inside of it. As this is an block element it has a height and width, so it will show the image as the parent has no height or width and therefore will allow the image to expand inside of it.
HTML:
With no height:
<div class="image"></div>With height:
<div class="imageWH"></div>With img:
<div class="imageIMG">
<img src="http://placehold.it/350x150" alt="" />
</div>
CSS:
.image {
background: url(http://placehold.it/350x150) no-repeat;
}
.imageWH {
background: url(http://placehold.it/350x150) no-repeat;
width: 350px;
height: 150px;
}
.imageIMG {
<!-- No need for anything -->
}
DEMO HERE
Why do you float the .main_div with width:100%? Floated elements get out of the flow which means they don't stretch their parent elements, so a background set on .main_div's parent won't show.
You should either remove the float or add some clearing technique to the header (also known as a css clearfix). See demonstration here: http://jsfiddle.net/YLEgY/1/
I have a div with the following CSS
#mydiv{
top: 50px;
left: 50px;
width: 200px;
height: 200px;
}
and my HTML looks like this
<div id = "mydiv">
<img src = "folder/file.jpg" width = "200px" height = "200px">
</div>
I'd like my web image to always be the same size (in a 1:1 aspect ration) no matter what the resolution of the actual image is. If my actual image files are square (with 1:1 ratio) then this isn't a problem. But if the actual image files are not square then the displayed web image do stretch to 100% of both the div's height and width (in this case 200px).
How do I get different image sizes to fit to my DIV?
You're mixing notations. It should be:
<img src="folder/file.jpg" width="200" height="200">
(note, no px). Or:
<img src="folder/file.jpg" style="width: 200px; height: 200px;">
(using the style attribute) The style attribute could be replaced with the following CSS:
#mydiv img {
width: 200px;
height: 200px;
}
or
#mydiv img {
width: 100%;
height: 100%;
}
Instead of setting absolute widths and heights, you can use percentages:
#mydiv img {
height: 100%;
width: 100%;
}
Or you can put in the CSS,
<style>
div#img {
background-image: url(“file.png");
color:yellow (this part doesn't matter;
height:100%;
width:100%;
}
</style>
will the height attribute stretch the image beyond its native resolution? If I have a image with a height of say 420 pixels, I can't get css to stretch the image beyond the native resolution to fill the height of the viewport.
I am getting pretty close results with:
.rightdiv img {
max-width: 25vw;
min-height: 100vh;
}
the 100vh is getting pretty close, with just a few pixels left over at the bottom for some reason.