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.
Related
I have different size images say (1920 by 1080).
I want to fit this image in an div having styles
I see the css file in which styles are given as
.detail-img{ width:100%; max-height:350px; overflow:hidden; margin-bottom:30px;}
.detail-img img, .detail-img-a img{width:100%;}
.detail-img-a{ width:100%; margin-bottom:15px;}
In html page div is like
<div class="detail-img">
<img src="<%= #event.avatar.url %>">
</div>
original image is
But it displays as
Is there a way to fit this my div?
You have to set max-width for the image
.detail-img img{
max-width: 100%;
}
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 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/
So I'm trying to create a simple layering technique, by putting an image behind a video in html/css. To give the video section some meaning and background style.
Heres a photoshop mockup of what I'm trying to achieve.
http://s8.postimg.org/tl749vxvp/example.jpg
HTML
div id= "background">
img src="images/imgc.jpg" class="stretch" alt="image"
*Video embedding goes here*
CSS
.stretch {
width : 100%;
height: auto;%;
}
#background {
position: relative ;
}
#wrapper {
background-size: 100% auto;
}
You need to center the video player div over the image(or preferably, a div with a background image). Here's some html:
<html>
<head>
<!-- Flowplayer js and css -->
</head>
<body>
<div style="width:100%; height:100%; background-image:url('path/to/your/image.png');">
<div id="player" style="width:600px; height:400px; position:absolute; left:50%; margin-left:-300px; top:50%; margin-top:-200px"></div>
</div>
</body>
</html>
Note: that this css:
width:600px;
height:400px;
position:absolute;
left:50%;
margin-left:-300px;
top:50%;
margin-top:-200px
makes a div of 600px x 400px and centers it within the parent div. If you need to change the height to 800px for example, change margin-top to 1/2 of the amount, in this case -400px
I should mention that there are various css options for the background image of the main div, read about them here: http://www.w3schools.com/cssref/css3_pr_background.asp. You may want to look at background-size:contain
After you have the div centered over the image as desired, just follow the instructions here (http://flash.flowplayer.org/documentation/installation/index.html) to get your video playing with flowplayer.
I would use z-index, this allows you to set the vertical stacking
See: http://html.net/tutorials/css/lesson15.php
and
http://css-tricks.com/almanac/properties/z/z-index/
The easiest method would be to place the video in a div and set that div's CSS background-image property to the image you are trying to use:
HTML:
<div class="film-background">
*Video embedding goes here*
</div>
CSS:
.film-background {
background-image: url('url of your film image');
background-repeat: no-repeat;
}
OR you could use absolute positioning and z-index, and apply the style to the image instead of the container div:
HTML
<div>
<img src="img link" class="film-background">
*Video embedding goes here*
</div>
CSS
.film-background {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I have the following css:
.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}
That corresponds to this HTML:
<div class="mod left"></div>
It results in this mess:
Is there a way to stretch an image to fit a div? Even at the expense of image quality? Thanks!
You can with the CSS3 property background-size. But it's not widely supported at the moment.
You can use the background-size CSS attribute for this.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
<div>
<img src="yourImage.jpg" alt="" />
</div>
div{width:300px; height:300px; overflow:hidden;} //example
img{width:100%;}
This way, the image will resize horizontally to cover your entire div.
Not setting the height, will make it automaticly resize proportionally.
I suggest you put overflow:hidden; on your div. If the image ratio is not the exactly the same, the exceed will be hidden.