I made a comment system and there are profile photos next to text but when someone comments profile pictures' widths are changing--something like this:
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
<img src='".$row2['photo']."' alt='pp' style='width:6%' style='height:auto' >
Because of the height:auto;, this is happening. Try setting a height of 6% also
<img src='".$row2['photo']."' alt='pp' style='width:6%;height:6%' >
By the way you only need on style attribute to us inline-styling as I did in code.
try using pixels with width instead of percentages.
The element width and height should be equal to make a perfect circle. Since the images have different dimensions, You can use the background-image instead technique
<div class='profile-pic' style='background-image:url(".$row2['photo'].")'></div>
CSS
.profile-pic{
height:50pt;
width:50pt;
border-radius:50%;
background-color:#eee;
/*background image syles*/
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
Related
I always wondered if this was possible without JS.
This is one of those situations where you can see that there is still a gap between devolpers and designers, hope we can help close it here :)
Here is a great explanation of how to do it (but for elements smaller than the container only)
http://css-tricks.com/centering-in-the-unknown/
//HTML
<div class="something-semantic">
<img class="something-else-semantic" src="wtvr"></img>
</div>
//CSS
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Best solution I've used as of late is half-hack, half-awesome.
<div class="something-semantic" style="background-image: url( {{src}} )">
<img class="something-else-semantic" src="{{src}}" />
</div>
//CSS
.something-semantic {
position:relative; /* or something other than static */
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
}
.something-semantic img{
width:100%;
height:100%;
opacity:0;
}
So for an image gallery, I'd inject the image src into inline background-image property and the <img> src attribute.
Making the REAL image completely transparent (but still visible), allows for alt tags, title, etc. Using background property lets you constrain the image dimensions to whatever size container you'd like.
the images top and left corners will always be flush with the container div, unless you know the size of the image and can give it ax explicit negative margin.
example fiddle http://jsfiddle.net/rHUhQ/
depending on the situation you can just give the image a class that styles it how you want since apparently it's container isnt that important (if it can be covered by the image in the first place).
I have a div that I am giving a width of 60% to.
CSS
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg');
}
HTML
<div id="image">
<img src="cleaning.jpg" />
</div>
My issue is that the image is being displayed at full size across the entire page!
How do I restrict it to the div it is being enclosed in?
Thanks!
As others have mentioned, you appear to be using two competing techniques - you've got a background-image on the container div, but you've also got the same image contained by the container div. Pick One.
For the background-image technique, you probably want to use something like:
#image {
width: 60%;
background:url('cleaning.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The likelihood is that you need to manage the overflow of the element.
Try the following:
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg') no-repeat;
overflow:hidden;
}
The issue you are having is that you set the parent div to have a width of 60%. You did not give the specific image element for that div a specific width. I hope this helped, I'm not 100% sure that I am correct but that is what this site is for, a question and answer format to help you work your bugs out. The issue how I see it is that you are setting the width of the specific div, and adding a background image to it which would not require you to set a <img></img> element. So in reality you have two copies of the image in the same spot, one which is 60% width, the second full size image covers the other. You must set the <img></img> element's width.
CSS:
#image {
float: left;
width: 60%;
/* No need for a background image to be set if you're using <img></img> */
}
#image img {
width: 100%;
}
Im not sure why you have a background image and a normal image. Background images will never scale with the container. I think your problem however is you need to set your image width as well. try
CSS
#image {
float:left;
width:60%;
background-image:url('cleaning.jpg');
}
#image img {
width:100%;
}
HTML
<div id="image">
<img src="cleaning.jpg" />
</div>
Example with http://jsfiddle.net/f5Ls3/
Example without http://jsfiddle.net/f5Ls3/1/
I'm not one to usually ask, but I cannot seem to get this done using CSS/CSS3.
Note, i'll be happy even with a not-so-supported CSS3 style, like resize.
The jsFiddle for it.
The current unresizable code:
HTML:
<div id="boxes">
<a id="about1" class="aboutbox" href="/property-for-sale">
</a>
<a id="about2" class="aboutbox" href="/why-cyprus"> </a>
<a id="about3" class="aboutbox" href="/why-zantis"> </a>
<span class="stretch"> </span>
</div>
CSS:
#boxes {
padding: 70px 0 70px 0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.aboutbox {
padding: 0;
margin: 0;
display: inline-block;
*display: inline;
zoom: 1;
width: 320px;
height: 225px;
vertical-align: top;
text-align: left;
background-size: auto auto;
}
#about1 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about2 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about3 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about1:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about2:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about3:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
If you resize the html panel, you'll see that they float as expected. I'm using a common method to distribute them equally along the parent div. I'm also using CSS to create a image button with hover effects (don't ask about the nature of the graphics ..).
I'd like to get these to resize accordingly when the html panel is resized; i.e. get the actual button to scale down and remain in one line.
I've got a working solution with jQuery, but spent my time getting this without it and got nowhere. Any ideas?
tia.
Aspect ratio
The main issue here is maintaining the relative dimensions of the images (the aspect ratio). A couple potential ways to do this without using JavaScript or jQuery are as follows:
Using foreground images (img tags).
Using calc() to make the height of the image wrapper be a fixed % of its width.
I didn't have much luck with calc(). The closest I got was attempting to make the height a fixed % of the viewport width (using the vw unit). It didn't seem very promising. I can't entirely rule out a solution being possible using calc(), but so far the only obvious CSS solution for maintaining the aspect ratio requires the use of foreground images.
Updated Demo
Hover state for foreground images
Achieving the hover effect using foreground images is fairly simple. Add a pair of images to each image wrapper, and apply the :hover pseudo-class to the wrapper to turn each image on or off as needed.
<a class="aboutbox" ...>
<img class="off" src="..." alt=""/>
<img class="on" src="..." alt=""/>
</a>
...
.aboutbox:hover img.off { display: none; }
.aboutbox img.on { display: none; }
.aboutbox:hover img.on { display: inline-block; }
Justifying images
The trickiest part of justifying the images is that there needs to be some whitespace between the image wrappers (in the HTML source code) for the justification to have a chance of working, for the same reason that words in a sentence need to have whitespace between them (otherwise, they'll be treated as a single word).
But whitespace between inline-block elements in the HTML source code causes 3-4px of horizontal spacing to be added between the elements (with no CSS solution available for avoiding it that's truly cross-browser and safe). That extra space, although necessary for the justification to work, is mostly likely unwanted visually and may prevent all of the images from fitting on the same line in some cases.
Here's an initial demo with a crude solution: limiting the width of each image to 31%, to allow enough room (on most screen sizes) for the whitespace between the image wrappers.
The other issue with justifying the images is that, as with text, justifying images only works if the content spans at least 2 lines. One workaround for this is to add a span tag at the end of the content with display:inline-block and width:90%. The initial demo demonstrates this.
#media queries
It's worth noting that the justification is only needed when the screen is wide enough to allow extra space between the images. #media queries can be used to only apply the justification on large screens. On small screens, the image wrappers can be floated so that there's no extra space between them.
Updated demo using #media queries
One solution is to replace the background image with an actual image. And use css to control what image is displayed, and to resize based on the containing elements. So you wrap each link in a div, which re-sizes based on your boxes container. Using css you set the image url using the content: selector.
http://jsfiddle.net/CPNbS/6/
Your resulting html looks something like:
<div id="boxes">
<div class="link" id="about1">
<a class="aboutbox" href="/property-for-sale"><img /></a>
</div>
<div class="link" id="about2">
<a class="aboutbox" href="/why-cyprus"><img /></a>
</div>
<div class="link" id="about3">
<a class="aboutbox" href="/why-zantis"><img /></a>
</div>
</div>
and the css:
.link{width:30%;height:100%;border:1px solid green;display: inline-block;
*display: inline;
zoom: 1;}
.link a{padding: 0;
margin: 0;
display:block;
width: 100%;
height:100%;
vertical-align: top;
text-align: left;
background-size: auto auto;}
.link a img{max-width:100%;}
#about1 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about2 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about3 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about1:hover a img,#about2:hover a img,#about3:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
You could also use a responsive design technique by including media queries. But this is more for different devices rather than re-sizing, so does not look as 'fluid'.
Hope this helps...
To do this with background images as you've set it up, you have to get rid of the width setting on the each item, and size the background image with background-size: 100% 100%; To maintain the height to width proportion of the .aboutboxes, use the intrinsic ratio method here with a percentage based padding-bottom. More here: http://alistapart.com/article/creating-intrinsic-ratios-for-video
.aboutbox {
position: relative;
padding-bottom: 70.3125%;
display: block;
width: auto;
height: 0;
background-size: 100% 100% !important;
}
If you'd like you can include a max-width or padding on the wrapper to limit how far they stretch.
Updated your fiddle here: http://jsfiddle.net/carasin/s4pUe/11/
Just be aware of some limited IE support of background-size: http://caniuse.com/#feat=background-img-opts
#boxes {
white-space: nowrap;
}
boxes a{
display:inline-block;
width: 33%;
background-size: cover;
}
but I'd rather use img tag see http://jsfiddle.net/Vicky_007/GZMvT/14/
and you can also emulate table:
#boxes {
display: table;
width: 100%;
table-layout:fixed;
}
#boxes a{
display:table-cell;
background-size: cover;
}
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.
I cant seem to get this to work.
http://www.keironlowe.host56.com
What I need is the banner with the low opacity image on it to be centered no matter the resolution, Ive tried a wrapper but because the wrapper is a width of 800 it cuts of the image, i've tried margin:0 auto; and i've even tried using the tag but it still doesnt center in higher resolutions.
You shouldn't need the tags in #Logan's example. That tag is deprecated anyway. Setting a width (not auto) and setting margin-left and margin-right to 'auto' in your stylesheet should handle the centering just fine.
Try taking the centering and pic out of the CSS and into the HTML. the css would look like this:
#banner {
background-color:#000000;
height:350px;
width:auto;
margin:0 auto;
}
and your HTML would look like this:
<div id="banner">
<center>
<img src=".....">
</center>
</div>
That is what I would do.
First, get rid of that <center> tag you have around the <div id="banner"></div>. You don't need it and it's deprecated.
Then, swap out your current CSS of the following block:
#banner {
background-color:#000000;
background-image:url(../IMG/Banner_BG.png);
background-repeat:no-repeat;
height:350px;
width:auto;
margin:0 auto;
}
For this:
#banner {
background:url("../IMG/Banner_BG.png") center #000000 no-repeat;
height:350px;
margin:0 auto;
}
Swapped out the many background attributes for the shorthand. Since you're showing the image as a background, added in the background-position property of center. This will now bullseye your image into the centre.