How to set image width and height 100% with CSS? - html

My code:
background:url(images/menu_edu.jpg) no-repeat;
But only half of the image is getting displayed.

The element which has the background needs to be the size of the image.
i.e. flower.jpg = 255px x 55px
<div class="flower">
Some text
</div>
.flower {
background: url(flower.jpg) no-repeat;
width: 255px;
height: 55px;
}
The size of the element cannot be set to the dimensions of the image if you're using a background. You could use javascript to calculate the dimensions though.
Or if you need to repeat the image, you can use repeat, repeat-x or repeat-y on the background tag instead.

If you just want to display an image, the IMG-tag is much more useful and effective... (and it could be set to width(/&)height = 100%).

If you want to display your image in full size, no need to use CSS for this
Dont give height and width attribute to the <img> tag like
<img src="this.jpg" /> it will display in full size
But if you want your <div> to show its background in full size, then is no other option than assigning the exact image dimensions

You are not showing enough code, but if the background image is in the body element, it is probably not stretching across the whole viewport.
Try
html, body { min-height: 100% }

Related

Scale imported image to picture box html

I have a page where users can upload there pictures that will act as their profile pictures. I imported it using this code in php and html:
$data = mysqli_fetch_assoc;
$image = $data['image'];
and the html
<img src = "./imgs/<?php echo $image; ?>" style = "height:200px; width:200px;>
the only problem is that, some pictures who are not actually a "square-in-size" will look greatly stretched in the image box. How can I make the image box displays the original "orientation" of the image for example, when showing a 5x10 image (100px x 200px), how can I not make it automatically stretch to a 10x10 orientation?
You've used inline styles to explicitly set the height and width of the image to 200px.
I would suggest you let the browser calculate the height automatically for you and only set the width to 200px (this will make the height auto).
If you want to maintain a square image without stretching / squishing the image, you should use a container with a background image, something like this:
HTML:
<div class="profile-image"></div>
CSS:
.profile-image {
background-image: url('image/url/image.png');
background-size: cover;
background-position: center;
}
Of course, you would do well to ensure some kind of standardisation between images, for example, by enforcing a max width, height or aspect ratio when the user uploads it.
You don't have to specify image size, so if you want all images take all the width you can just apply a width: 100% and dont specify height, it will be automaticly calculated
You are using the term "orientation" wrong. Orientation suggests either the picture is "landscape" (the x value is bigger than the y value), "portrait" (the y value of bigger than the x value) or square (where both axis are the same in size).
What you are looking for is a container for the image, which is always a square (1:1), and the image inside will not stretch.
You can achieve such behavior by applying the image as a background-image via CSS, and give it a background-size: cover. This will fit the image inside the container, cropping the extra pixels from either side.
HTML Example:
<div class="container"></div>
CSS:
.container {
width: 250px;
height: 250px;
background-image: url('/path-to-image/image.png');
background-size: cover;
}
You can set the CSS form the PHP code if imported inline inside a <style> element and use the $image variable that way:
<?php
$image = $data['image'];
?>
<style>
.container {
width: 250px;
height: 250px;
background-image: url('<?= $image ?>');
background-size: cover;
}
</style>

Avoid image stretching

so I have an image tag on my page that is set to 300px height. When a bigger image is used for it, the image is stretched so it fits and it gets really ugly. Is there a way to just get a part of the image instead, preferably the top 300pxs of it?
Hope I made myself clear, I'm new to this. Thank you!
I believe
overflow:hidden;
is what you're looking for. You put that property on a div that surrounds the image, not the image itself. Here's a good resource: http://css-tricks.com/almanac/properties/o/overflow/
Here's a code sample:
<html>
<head>
<style>
.overflow{
height:100px;
width:200px;
overflow:hidden;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div class="overflow">
<img src="http://funmozar.com/wp-content/uploads/2014/06/white-cat.jpg">
</div>
</body>
</html>
You could also want to consider using the max-height and max-width properties. Make sure not to set both height AND width on the image or it will still stretch it to match those parameters.
probably the best solution in order to avoid image stretching is to use a div with fixed size (width and height), background-image and use background-size propriety.
example:
html:
<div id="yourDiv"></div>
css:
#yourDiv {
width: 200px;
height: 200px;
background-image: url('yourimage.jpg');
background-size: cover;
}
Please have a look here for other information about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A possibility is to use the object-fit CSS property on the image. For instance, the value contain will scale down the image so that its original ratio is maintained; while the value cover will crop parts of the image. You can then use the object-position property to properly place the scaled down or the croped image.
For more information on these CSS properties and their differents values:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
You can wrap the image in an element, set fixed dimensions for the container and no dimension settings for the image but overflow: hidden on the image. Here’s an example of using small dimensions:
An image:<br>
<img src="http://www.lorempixel.com/100/100" alt="foo"><br>
The same image with just the upper half taken:<br>
<div style="width: 100px; height: 50px; overflow: hidden"><img
src="http://www.lorempixel.com/100/100" alt="foo"></div>

Twitter BootStrap Background Image

I have a fixed nav bar at the top and a container with a full width Background spanning span12. but since the content of the background image is crucial for the layout for visual cue. i want the whole image to be displayed at all times irrespective of the window size.
Which is the best way to construct the image or set of images to achieve the same.
Large Monitor
Medium Monitor
Small Size
I have a form that will be displayed to the right of the image. Hence making it a little tricky for me to get the image working.
Link: play.mink7.com/minkstock/
If I understand correctly, you want just to have a maximum size (or percentage) that your image can reach. Try, instead of a background image, using a <img> element like so:
img{
max-width: 100%; /* or any other value */
height: auto;
}
Is there any reason you chose to set the background image using css?
If i change the #landing-page-bg div to
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
It produces the desired effect you want (minus some red background you set).
If you wanted to then overlay items on the image you could use relative div positioning.
Do something like background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat; for your small media query.

Strange CSS issue - background attribute is not working without image height

I need to set the image height everytime I'm using background: url('images/something.jpg')[..];
Fe.
HTML:
<div class="someImage"></div>
CSS:
.someImage {
background: url('images/something.jpg') no-repeat top;
}
The above example should work... but image won't display until I add an image height attribute to the CSS style class:
.someImage {
background: url('images/something.jpg') no-repeat top;
height: 25px;
}
And then my image appear on the website...
Why does it happend?
Because without content, a div has no height, background image or not.
Since your div is empty it has no height..
The image you use is applied as a background, so it does not affect the size.. it just fits whatever space is available at the div.
When you explicitly set the height, you create room for the image to appear..

What is wrong with this CSS?

I have the following CSS code:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
height:100%;
width:100%;
}
and the following HTML code:
<div class="yellow"> </div>
However, the div on the page does not have the image. You can see this by clicking on the blue "Logs Status" button (in the tab box) at http://cl58logs.co.cc/.
What's wrong with the CSS?
Your div is not large enough. Background images will not scale. If you want the image to scale, you'll have to use the img tag.
Also, note that height: 100% doesn't work in CSS, except for table cells.
The problem is that the div with the background image has almost no content (apart from a space character).
If you force the div to have a larger height, for example, by changing the CSS to this:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}
then your image appears
The height (437px) and width (700px) of the image is greater than the dimensions of your div. Set an appropriate height and width for your div to allow for the image to be shown.
Install Firebug to better inspect your HTML elements when you come across issues like this.
Since you're setting height and width to 100%, the amount of the image you see will depend on the divs containing the yellow class. Try changing the width and height on the status class and you will actually see your the bg image on yellow.