I want linked images to have the size 800x600 with the original proportions. The linked images could have the site 1000x400 or for example 600x1000.
At this time I resize the image with width=800px and in the class div overflow is hidden
<div class="cut">
<img src="www.example.de/image" width=800px>
</div>
This works when the image proportion is like 600x1000, but not when it is 1000x400.
How does it handle every image size?
If you want an easier solution, change the image to background.
Like this:
http://jsfiddle.net/yp7jq0tf/
.image{
float:left;
width:800px;
height:600px;
border:1px red solid;
background:no-repeat center center;
background-size:100%;
}
Html part:
<div class="image" style="background-image:url(
http://www.google.com/images/srpr/logo11w.png
);"></div>
I believe this is what you're looking for:
.image{
width:800px;
height:600px;
background:no-repeat center center;
background-size: cover;
}
You will need to crop the images somehow, so putting them in the background makes most sense.
http://jsfiddle.net/x07jbku2/
Related
I did some search here and tried different codes that was recommended but none seems to work. Sorry if this is a basic question but I'm very new to coding.
I'm trying to centre and fit an image to the browser window. What code do i need to use?
P.S the image isn't my background image. I'm changing the color of the background and want this image on top of the background image.
This is the code i have
<body>
<div id="clock">
<img src="images/clock.png" alt="">
</div>
</body>
What CSS code do i need to use to achieve what I'm trying to do?
The first image is how its showing on the browser (basically can only see part of the image since it's enlarged)
The second image is how I want it to look
Add some styling for that image. Add this to your css file:
#clock img{
width: 100%;
}
#clock{
width:100%;
text-align:center;
}
#clock img{
height:100px;
width:auto;
}
<div id="clock">
<img src="http://pngimg.com/upload/clock_PNG6611.png">
</div>
here you can increase or decrease image height:100px; but make sure width is auto otherwise the aspect ratio of that image will effect
try this may help you
#clock
{
margin:0px auto;
text-align:center;
}
#clock
{
max-width:100%;
}
I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/
A single paged site with a responsive image that takes up the full screen, on any device. That's my issue I can't figure out a way to get a background image to go full screen on any device.
<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">
I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained.
The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.
Demo Fiddle
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%;
width:100%;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
So I got a problem. For school I have an asignment for making a simple website, and one of the problems I've got is that a big picture won't fit in a small div using css, here's my css:
#face{height:100%;width:80%;background-image:url('./pictures/face.jpg');float:left;}
and here's my html
<div id='face'> </div>
I know how to fix this problem in html, but not in css, can someone help me?
Kind regards,
A 15 year old student
You have given your div a percentage as height and width, but of what?
Your body needs to have a size for the div to relate to.
http://jsfiddle.net/q42Zq/
body {
height:500px;
width:900px;
}
try background-size: 100%;
this should stretch the background to cover the entire div.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
working example with one image: http://codepen.io/anon/pen/gJCuv
CSS:
div{
width:100px;
height:100px;
border:3px solid blue;
background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRwR8YYfYmRSuv-tQgN-2yMyIgKQTCY2gSeXKHFKSxRlXZxsi8K);
background-size:100% 100%;
background-repeat:no-repeat;
}
On my site a have a div, inside the div I have different images width different width's and height's. I want the image to be in the center no matter what size or shape. Lets say the div is 200px * 200px. All images need to have min-width:100%; and min-height:100%; so that there is no white in the background. So basically I want the center of the image to be in the center of the div. How do I do it?...
<!DOCTYPE html>
<html>
<head>
<style>
.div{
width:200px;
height:200px;
overflow:hidden;
box-shadow:0px 0px 5px #000;
}
.img{
/*What shall I put here?*/
min-width:100%;
min-height:100%;
}
</style>
</head>
<body>
<div class="div">
<img class="img" src="img.jpg">
</div>
</body>
</html>
You would be best setting the image as a background of the div and using setting the background position.
This is a duplicate question. The answer, as referenced here, is to display the image as a CSS background-image rather than using an img element and set it to display in the center:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
}
To ensure that your image is as least as large as its “containing” element you can use the background-size property, which accepts a number of different properties. The one you want is cover, which instructs the rendering engine to stretch the image so both dimensions of the image are at least equal to that of the element:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
background-size: cover;
}
I do not display it as a thumbnail, but can CSS help compress the image of size 1000x1000 into an image of size 500x500?
My CSS for the image looks like this:
.images {
background:url("image.png") no-repeat scroll; // this is a 1000x1000 sized image
}
How do I overwrite this? I do not want to have to generate another image of size 500x500.
You can use CSS3 background-size:
.images{
background:url("image.png") no-repeat scroll;
background-size:500px 500px;
}
But that will resize the image AFTER it has been dowloaded. And the best way is resizing the image with PHP (or similar) BEFORE the user downoads it.
If you can't resize it server-side and you want it to be cross-browser, you could also use
HTML:
<div class="images">
<img class="bg" src="image.png" alt="My image" />
Content
</div>
CSS:
.images{
position:relative;
}
.images>.bg{
height:500px;
width:500px;
position:absolute;
top:0;
left:0;
z-index:-1;
}
(You can set both height and width but only one of them is necessary).
background-size: 500px 500px;
But it's not supported in ie7 and ie8.
If you would display it in an image tag you can set the width and height to the image tag. You can fake a background by absolute positioning the image.
<img width="500" src="..." />
If you are already using the image somewhere else it could be a good idea to reuse and resize it.