Why can't I size this image in CSS? - html

I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing including adding display: block to the CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Home Page</title>
</head>
<body>
<div class="logo">
<img src="images/logo.png" alt="Stuff logo">
</div>
<div class="button">
<button type="button">Home</button>
<button type=button>Contact</button>
</div>
</body>
</html>
This is the only things I have in my css file:
body {
margin: 0 auto;
}
.logo {
max-width: 200px;
max-height: 200px;
}
.button {
border: 3px solid green;
}

sir here is final answer
sir you had given the class logo to the not to the img
so you have add class to the img not to the
if css you have just do this
<div class="logo">
<img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="Plants and Things logo">
here is css
.logo img {
max-width:20px;
}
this will work

There are few region behind it
for example
you didn't link the css file with html file.
size of your logo may be smaller then max-size
but as solution i would suggest you to use the css in the img for the temporary solution
like this
try to change with this
<img class="logo" src="images/logo.png" alt="Plants and Things logo" style="max-width: 20px;max-height:20px">
also by using the
body{
background-color:red;
}
you can check that your css file is linked or not
also check the console errors

Related

Resize logo image

So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>

html/css can't change image height with percentage

So I've got a simple little domain up with a fileserver.
I want the main page just to be an image.
I also want that image to take up half of the browser window's height, so I write up a bit of html with in-line styling. Yes, I am a beginner at this stuff, so all I know for now is basic html and css.
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:50%;">
I try it out and the image happily displays at full resolution, completely ignoring my styling, so I play with it a little and I eventually find out that something like
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:500px;">
and
<img src="fruit.png" alt="a bowl of fruit" style="width:50%;">
work just fine, but the reason I use a percentage is because I want the size to scale according to the browser window size.
So I'm trying to figure out what I'm doing wrong here, or if there's some bug or I'm just being an idiot and the fix is painfully obvious.
The img has to have an absolute position! Otherwise a max-height doesn’t do anything.
Furthermore the value "auto" isn’t allowed.
<style>
img {
position: absolute;
max-height: 50%;
}
</style>
<img src="fruit.png" alt="a bowl of fruit"/>
or
<img src="fruit.png" alt="a bowl of fruit" style="position: absolute; max-height: 50%;"/>
First of all, you should use CSS in a linked file and not inline, like you do right now. This makes managing changes incredibly easier. Take a look at this minimal example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
The style.css file would contain all your styles, like:
img {
max-width: auto;
max-height: 500px;
}
An alternative for small pages is writing the CSS within the <style> tags, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
img {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Even better, use classes:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.image {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img class="image" src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Regarding your question, I assume what you want is dynamically fill the half of the browser window with an image. This is possible with a rather new unit called viewport height (vh). Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.half-viewport {
height: 50vh;
width: auto;
}
</style>
</head>
<body>
<img class="half-viewport" src="http://lorempixel.com/1280/800/" alt="image">
</body>
</html>

Responsive Background image for every section

Hi i searched it a lot but i cannot find any solution.
Actually I want to have image for every HTML section. and it should be responsive.
here is my code
<section id="portfolio">
</section>
<section class="success">
</section>
and CSS
#portfolio {
background: url(../img/STS_247650163-Web.jpg);
background-size: cover;
height:400px;
}
.success {
background: url(../img/success.jpg);
background-size: cover;
height:1100px;
}
now if I remove height the images disappear and if add them the images becomes big and ugly.
i tried.. different method but nothing is working
thank you
You have two ways to make responsive images.
Use bootstrap- .img-responsive
use custom media queries -
#media screen and (max-width: 368px) {
img.yourclass{
min-height: 150px or auto;
}
}
Better use bootstrap for your divs or section, try this -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-responsive" src="http://placehold.it/350x150" alt="Chania" width="460" height="345">
</div>
</body>
</html>

Making an image fit to size of the html page using css

<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>

CSS sprites not displaying their image

OK so I have been having issues getting sprites to work on my website, so I decided to rewrite the w3 sprite tutorial from scratch to see what I was doing wrong. Here is the code I wrote:
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="img_navsprites.gif" alt="">
<img src="img_trans.gif" alt="" id="home"><br><br>
<img src="img_trans.gif" alt="" id="next">
</body>
</html>
style.css
#home{
width:46px;
height:44px;
background: url(img_navsprites.gif) 0 0;
}
#next{
width:43px;
height:44px;
background: url(img_navsprites.gif) -91px 0;
}
When I open this in Chrome the first image shows up but not the separate images. I have no idea what I have done wrong, by every account this code should work.
If you will look closely to example on W3 then you will see that you need "img_trans.gif" to be proper img file as well. It is just one pixel image in their example.
IMG element displays 'alt' attribute, which is empty in your code, when your 'src' is incorrect.