I am making a project in which I am using a cover picture like Google+.
approx Full on screen but when I upload small size pictures or very large size pictures, it stretches or compress in preview.
simple tag I am using to fit in my box is
<img src="coverphotos/1291384_4846629064030_1548133592_o.jpg" height="530px" width="1024px" style="border-width: 0px; margin-top:-4px">
Very very important. I wanted to make a cover picture on my project but i am getting irritated because its stretching, and making picture ugly, how Facebook,Google+ upload a cover picture without stretching?
Preview.
http://www.tiikoni.com/tis/view/?id=479959b
I don't want it to get stretch, while uploading on fb and google its works osm
Either set the height to 530px OR set the width to 100%, don't do both together.
The picture will not be stretched and will maintain its aspect ratio. :)
This: height="530px" width="100%"
You're telling the picture to take the full width of its parent and to be exactly 530px high. What you probably want is unconstrained height on the image, but constrained height on its parent with overflow: hidden.
Take a look at this article: Perfect Full Page Background Image
Based on your link, this css fixed the issue.
body {
width:100%;
margin: 0;
}
center {
width:100%;
}
center img {
width:100%;
height: auto;
}
Related
I have a table for member. When i display all image in html I put and all of them are displayed with the same size but when I put class='img-responsive' they go back to their original size.
Ok I now understand what you were asking. So let me explain.
All images have something called an aspect ratio. This can be 1:1 which means for every 1px(or whatever your unit of measurement is) there is 1px on the other side. Then 1:2 so for every 1px there is 2px on the other side and 1:3, 1:4 ...etc.
The ratio you would like to have is a 1:1 ratio that is 100px * 100px.
But this cannot be forced from an image with another aspect ratio without distorting the image. Companies like facebook do this by either creating cropped versions of the image or giving it a background-size of cover.
My recommendation would be to create a div with a height and width of 100px and set the image as a background image as follows:
.divClass{
background-repeat:no-repeat;
background-size:cover;
width:100px;
height:100px;
}
Next add the following to your php code
<div class="divClass" style="background-image:url('image/location/<?php echo $imageName; ?>');">
This would allow the image to fill the div fully while keeping the aspect ratio. The downsides would be that some of the image would not be visible if the aspect ratio of the image is not 1:1 which is what you are trying to achieve. Also if you would like to change the position of the image you can use the background-position Property.
If you would like to be able to see the entire image you can add a popup box.
jQuery: How can I show an image popup onclick of the thumbnail?
Your final solution would be to crop the images or allow the user to crop the image before they upload. Below is a great plugin that allow this.
https://fengyuanchen.github.io/cropperjs/
If you want to force the width/height of the img element you can use :
img {
width: 100px;
height: 100px;
}
In case you are using some other libraries that override default css behavior you can use !important:
img {
width: 100px !important;
height: 100px !important;
}
The img-responsive class from bootstrap will set:
max-width: 100%;
height: auto;
To the image, and if you want a specific width/height - this is not what you are looking for.
I want to display image in fixed size without changing the aspect ratio.
I wanna display images in this size 200px * 200px, while keeping the original aspect ratio. All the images here are larger than 200px * 200px.
I want to crop the image from center and set width and height as 200px, without changing the aspect ratio, which means we only want to display some part of the image.
Could anyone tell me how to realize it? I've tried CSS using max-width and max-height but seems CSS couldn't help.
I use PHP as server-side language. I heard someone suggest GD. Any ideas?
This should solve the problem
HTML
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
</div>
CSS
div {
width:200px;
height:200px;
overflow:hidden;
position: relative;
}
div > img {
width:300px;
height:auto;
position:absolute;
top:-100px;
left:-100px;
}
Here is a DEMO
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
OK, let's say I have this image:
In my Java game, I use a cropping method which crops each monster of 32x32 pixels and thus puts in monster[0] onwards. Anyways, in PHP, is there some way I can do this? Like crop an image and go from there?
Any help would be appreciated.
You can use imagecreatefromgif() with PHP where you can create a new image on the fly by giving specific x and y positions. Rather than just me copy/pasting the code, here is the link to the documentation.
http://php.net/manual/en/function.imagecreatefromgif.php
You can also use different variations of imagecreatefromgif() such as imagecreatefromjpeg() or imagecreatefrompng() etc
All are linked to on the PHP documentation page as well as more examples in the comments.
Hi you can crop the image via imagecopyresampled the man page
http://php.net/manual/de/function.imagecopyresampled.php
You just have to set the correct offset.
if this should be displayed in a Browser you can do it even via CSS
.selector {
height: 32px;
width: 32px;
overflow: hidden;
display: inline-block;
background: url(theimage.gif) -32px 0px no-repeat;
}
Hope it helps
Don't crop it. You can use it as it is with CSS background-position. The the sive of a and move the background to the image you want. It is faster than loading every image on its own.
I want to improve one of my Facebook apps by allowing the users to apply border styles to their images. I am not exactly sure how this can be done, but hopefully someone here will be able to help. The application is written in PHP. I originally thought that I would be able to create an image with just the border, a few pixels wider and taller than the image I wanted to add the border to, then just merge the two images, but that didn't work.
Any help would be great, and rewarded with your name and Stackoverflow profile image postedon the Credits page of the app.
Try putting the background image in the CSS background property.
How about some code using random images from google searches?
<div id="myWrapper" >
<img src="http://www.iconarchive.com/icons/rokey/the-blacy/128/secret-smile-icon.png" id="myImage" />
</div>
<style>
#myWrapper {
background-image: url(http://images.clipartof.com/small/210747-Royalty-Free-RF-Clipart-Illustration-Of-A-Diamond-Plate-Border-Frame-Around-Blank-White-Space.jpg);
width: 450px;
height: 450px;
}
#myImage {
margin: 160px 160px;
}
</style>
Note: I don't claim these images. I'm just saying this cos somebody's gonna bitch. Watch and see ;)
EDIT
I see now however that maybe he does just want to add a style as another poster suggested. So now we're back to asking the OP does he mean how does he store user preferences for images and then dynamically add that style onto an image as it's posted from the app?
I guess that would call for an inline style wouldn't it? ;)
myImageSource = "<img src='".imgSrc."' style='border: 2px solid ".imgBorderColor.";'/>";
Assuming you're using GD to create the images, you can use imagerectangle() to put a border around the image. PHP.net has a great example: http://us2.php.net/manual/en/function.imagerectangle.php
#drachenstern: CSS is a good idea, but how would the background help? CSS has a border property that can be used. ;) img.someclass { border: 2px solid black; }