I need to give access to the users to upload what ever pixels they want but it will be over 100x100 for their profile pic. The pic will be contained in SQUARE box.
But the problem is, when I upload a 100x100 or sizes similiar to that, it works good as expected. But when I upload an image with the pixels of 640x360 or anything similar to that sort (or widescreened), the image is scaled into the box well but however, it is not vertically aligned. I want the vertical-align to be in the middle, so how do I do that?
CSS:
#imgbox {
height:100px;
width:100px;
overflow:hidden;
border:solid 1px #000;
margin-left:10px;
margin-top:10px;
}
#imgbox img {
width:100%;
position:relative;
//I want the vertical align of the image to be in the center
}
Here: http://jsfiddle.net/ZdW9h/1/
A couple things -
Use a class for your imgbox elements, IDs are used for selecting a single element in a given document.
Secondly, I suggest using one div with background-image properties, this way you can position it relatively.
HTML
<div class="imgbox" style="background-image: url(http://plants.montara.com/ListPages/FamPages/showpix/ranunculaS/aqufor_a.JPEG)"></div>
<div class="imgbox" style="background-image: url(http://pictures.inspirationfeed.netdna-cdn.com/wp-content/uploads/2010/06/Evolution_by_will_yen-500x500.png)"></div>
CSS
.imgbox {
height: 100px;
width: 100px;
overflow: hidden;
border: solid 1px #000;
margin-left: 10px;
margin-top: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
JSFiddle
If you set a line-height on your container div, you can then use vertical-align on the image to position it. Also, you should use max-width and max-height to make sure the image is always contained within the box (assuming that's what you want).
http://jsfiddle.net/ZdW9h/7/
And here is the updated CSS:
#imgbox {
height:100px;
width:100px;
line-height: 100px;
overflow:hidden;
border:solid 1px #000;
margin-left:10px;
margin-top:10px;
}
#imgbox img {
max-width:100%;
max-height: 100%;
vertical-align: middle;
}
Just set the width and height attributes on img to 100: http://jsfiddle.net/ZdW9h/4/
Resizing images in this way is generally not the best idea, though. If you can resize the image with some sort of image library like GD I'd recommend doing that first. It will save you some space on your server too.
This thing should fix your problem:
#imgbox img {
width:100px;
height: 100px;
position:relative;
}
Let me know if you are looking for something else.
You can try :
#imgbox { display:table-cell; }
Related
I've found a lot of answers to this question, but none (that I can find) apply to my particular situation.
I have an image in a div that I would like to scale with the width of the page. However, my image is much larger than what you actually see, as I'm using object-fit: cover and object-position to fit it to the container. I can't find a solution that keeps the image the same while scaling the container (and therefore image) down.
In other words, I would like the container and image to scale and have the image look the exactly the same. All the solutions I've found move the image around inside the container when the page width is changed.
Edit for clarity: Imagine there's a dot at the very center of the image, and normally that dot is in the very center of the container. In my case (because of object-position I think), the dot moves vertically when the width of the page is changed. I need some way to scale the container down to keep the dot in the same place.
Edit 2: Figured it out. Setting the height of the container via vw (viewport width) does exactly what I'm looking for. e.g. height: 10vw;
Here's the CSS I have at the moment:
.container {
height: 25%; /* This would need to be removed/changed I assume.*/
}
.image {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 100% 80%;
}
My container is the full width of the page.
This seems so obvious to me, I think I didn't get your point.
Is this what you want ? This snippet shows that no matter the size of the picture, it will fit into the container.
EDIT Your issue is that your image isn't centered in your container. To do that, you have several options. Here is one using a relative position with a transform. You could also use flexboxes, which are, in my opinion, much better.
.container {
width: 500px;
border: 1px solid darkcyan;
height: 600px;
}
img {
max-width: 100%;
height: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<img src="https://placeholdit.co//i/500x250?&bg=cccccc&fc=000000&text=BIG IMAGE">
</div>
.image{
max-width: 100%;
}
<img src="https://wallpaperbrowse.com/media/images/750806.jpg" class="image" />
To have your image fill the width of it's container, you need the max-width property:
.image {
max-width: 100%;
}
Well, after a bit more digging I found the answer to my question. The solution was to use vw (viewport width) to set the height of my container.
In my case, using height: 10vw; on the container does exactly what I'm looking for. The value of that can be adjusted of course depending on how much space you want the container/image to take up.
You can use max-width: 100%; in style of the img.
But another way is to use your image as a background of your div with the following style:
.container {
background-image: url(https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width:70%;
height:300px;
margin:0 auto;
}
<div class="container"><div>
Update:
You can run the following demo and change the size of it here
.container {
background-color: black;
width:70%;
margin:0 auto;
padding:20px;
position:relative;
}
img{
position:relative;
max-width:100%;
}
.dot{
background:yellow;
width:10px;
height:10px;
position:absolute;
left:50%;
top:50%;
transform: translate(-5px,-5px);
z-index:1;
border-radius:50%;
}
<div class="container">
<div class="dot"></div>
<img src="https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png">
<div>
You can see the yellow dot always (any page sizes) in the center of image and center of the container:
Small page size:
Large page size
Your probably going to say this has been asked before but this is a variation with a bug. So we are all aware of the technique used to answer this question:
Fixed width div on left, fill remaining width div on right
However this does not work if the variable width element is an input tag.
http://jsfiddle.net/8pk4K/2050/
even overriding the inputs default css doesnt fix this:
display: block;
overflow:hidden;
background-color:green;
height: 100px;
width: auto;
Iv been playing with this for ages, it only happens on input tags, if you replace it with a span (default display inline but set it to display block) it still works.
Any idea why this only doesnt work for input tags and nothing else?
EDIT:
For clarification, I know that the fix for this is to put the input into a div and apply width 100% to the input. My question is why this is necessary, not how to fix it.
I know the problem, styling form elements will always be a pain in the ass.
I've came up with this work around, by wrapping the input in the right div.
<div class="header"></div>
<div class="header-right">
<input type="text" />
</div>
.header{
float:left;
background: #efefef;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.header-right{
overflow:hidden;
background-color:#000;
height: 100px;
position: relative;
}
.header-right input {
background: green;
position: absolute;
width: 100%;
height: 100%;
}
JSFiddle
You can use calc to produce the width what you desire because inputs are replaced elements that have intrinsic dimensions just like images
CSS
.header-right{
display: block;
overflow:hidden;
background-color:green;
height: 100px;
border: none;
width: calc(100% - 240px); //Add this
}
Note: You must give a dimension (width) to the select or otherwise give you the default browser width
DEMO HERE
Try adding width in % for both .header and .header-right.
Like
.header{
width:20%;
}
.header-right{
width:80%;
}
I am nearing completion of my site http://csgoshack.com/shop/
I need to do one thing and this is to put a white box in the center of the screen so I am able to see the site.
I tried to do this by photoshoping a white box onto the background image but that didn't work.
How would I go about doing this?
.whitebg {
width: 1250px;
padding: 10px;
border: 1px solid black;
margin: 0;
background-color:#ffffff;
margin:auto;
position: absolute-center;
top:0;
}
First you would need to design your box using CSS and call it in using HTML.
HTML:
<div class="body-content">Insert Lists, Text, and other body content here</div>
CSS:
.body-content {
width:80%;
height:80%;
top:10%;
position:absolute;
background-color: white;
margin-left:auto;
margin-right:auto;
}
Adjust the width, the height, the positioning, and the colors to your specifications. I wouldn't change the margin-left and right because that centers the div inside of the body ( unless you don't want it exactly centered ).
Hope this helped!
I'm trying to get my images to align horizontally but I seem to be doing something wrong but I have no clue what the problem is.
Here's the JSFiddle: http://jsfiddle.net/ByDAA/4/
Here's the CSS:
.imgcontainer img {
display:inline-block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
margin:0px 37px 0px 0px;
width:175px;
height:175px;
}
You should wrap each img and p with a div and use float:left. Example: fiddle
You're seeing line breaks because you explicitly put them there with <br> elements.
To achieve the intended effect, put the images and their subtexts in a separate container (div or article) and apply the display:inline-block style to that element.
try :
float: left;
and change your css - remove unneded properties
Might this be what you are after? http://jsfiddle.net/taneleero/ByDAA/7/
Assuming that you would like the "Let Us Sell It" to align with each image I added containers around each image + the text and set them to inline-blocks. For the container I assigned text-align:center so the inline-blocks would align to the center. Also I changed to images do display:block to force the text below the image.
.container {
position: absolute;
margin: auto;
width: 100%;
text-align:center;
}
.imgcontainer img {
display:block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
width:175px;
height:175px;
}
span {
display:inline-block;
margin:0px 37px 0px 0px;
}
You need to wrap each image and text element in a specific element (a div or figure).
A figure is probably best as it allows the use of the figcaption element inside it for the text.
Each figure is set as display:inline-block and vertical-align: top and the container is set to text-align:center
Codepen Example
I'm not trying to actually crop the image file. The image has a thick border all around and I just want to somehow hide it. The markup html is this.
<div class="imgDiv">
<img height="200" width="200" src="http://site.com/image.jpg">
</div>
Is there a way to center or resize this image so that the border is gone?
Sure. Say you want only the center 100x100. You could use this CSS:
.imgDiv {
width: 100px;
height: 100px;
overflow: hidden;
}
.imgDiv > img {
position: relative;
left: -50px;
top: -50px;
}
Here I've gotten the center 64x64 of your 128x128 avatar using this technique: http://jsfiddle.net/5kHbQ/
You could do it with css, inline:
<div class="imgDiv" style="width:200px;height:200px;background:url(http://site.com/image.jpg) no-repeat -20px -20px;"></div>
or in css:
.imgDiv{
width:200px;
height:200px;
background:url(http://site.com/image.jpg) no-repeat -20px -20px;
}
Either way, you would remove the <img> node in the html.
Play with the width, height, and the last two values of background.
While not the primary purpose for using them, you can use CSS Sprites to remove the border.
Essentially, you would use div elements defined with the height and width that you desire for the image.
Then, you would set the background-image property to be the url of the image (be careful here, the url of the image is relative to the location of the CSS, so be mindful if you use an external CSS file instead of an inline style attribute).
Finally, you would set the background-position property to offset the image so that it lines up with the div element you defined as the "frame".
Lets say you had 10 pixels of yucky border on the image. The following CSS would hide it from view:
.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { display:block; margin:-10px 0 0 -10px; }
An alternate method would be to use position:
.imgDiv { width:180px; height:180px; overflow:hidden; }
.imgDiv img { position:relative; top:-10px; left:-10px; }