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; }
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
I am trying to integrate a hover effect to an img in css but the problem occurs when I hover it, the hover area is misplaced and the the hover effect occur even when the mouse is not over the img.
<body>
<div id='backgroundContainer'>
<div id='background31'></div>
</div>
</body>
CSS:
html, body {
max-height:100%;
width: 300%;
background: url('background.png');
top: 0;
left: 0;
background-size: cover;
background-repeat:no-repeat;
}
#backgroundContainer {
top:0;
left:0;
margin:0;
padding:0;
height:100%;
width:100%;
}
#background31 {
top:45%;
position: absolute;
margin:0;
padding:0;
background: url('alure.png');
background-repeat:no-repeat;
height:55%;
width:70%;
left:230%;
background-size: 5%;
}
#background31:hover{
background-size: 7%;
}
I was thinking about using background-position:x% y% or margin-left to simplify the code but it did not work what I tried.
You are applying the hover effect on an div which is set to a large area (the area in red in my fiddle below). This is why the hover is activated even when the mouse is not over the image.
If you add an image to the nested div, and apply the hover effect to this image it should work.
<div id='backgroundContainer'>
<div id='background31'>
<img src='http://www.sjiep.nl/images/sjiep.gif' id='testImage'>
</div>
</div>
and the css
#testImage{
width: 100px
}
#testImage:hover{
width: 150px;
}
See also: http://jsfiddle.net/2CbTX/1/
Update
Added a link to the image, see: http://jsfiddle.net/2CbTX/2/
because you have put the hover for the div the whole div , not just the image and this div background31 occupies the lower right corner square of your window .
see here : http://jsfiddle.net/Pda5e/
your image size becomes very small as compared to the div in which it is in. Since you have made it 5% of the div.
Resize the div to make it smaller and increase the background size to fill the div
so if you have to make the hover only affect the image, you must give the hover to image only.
like here : http://jsfiddle.net/Pda5e/1/
Try replacing this code
#background31{
background: url(maxresdefault.jpg);
background-repeat:no-repeat;
height:50px;
width:100px;
background-color:#066;
background-size: 5%;
}
#background31:hover{
background-size: 100%;
}
The hover effect occurs not over the image because you only change background-size, but not the size of #background31 element, it always remains width:70%.
So you should use background-size: 100% and change the width of the background31 element.
#background31 {
background-size: 100%;
width: 5%
}
#background31:hover{
width: 2%;
}
But background-size is not supported in IE8. If you want IE8 suuport than use <img> element instead of a div.
Is it possible to define an image by a percentage of the document window? It's nested in several div tags, so it would be to somehow define its height% in reference to the window, rather than its parent tag. In effect, something like this...
<img src="image.jpg" height="50% of window"/>
You can use the viewport's height and width.
For example, the following class will make the element half the size of the viewport.
.size {
width: 50vw;
height: 50vh;
}
jsFiddle Demo
This is a pure CSS3 solution, but it has some browser support issues.
Not with CSS, but you could with JavaScript:
yourImage.height = Math.floor(window.innerHeight / 2)
I found the best solution for this here. The example given in that article did not work for me when I added an image to the mix. However, I enhanced it creating a "card" layout that works with an image and text.
.course-card-wrapper {
display: inline-block;
position: relative;
width: 50%;
background-color:silver;
}
.course-card-aspect-ratio {
padding-top: 150%;
}
.course-card-image {
width: 100%;
height:auto;
}
.course-card {
position:absolute;
left:10px;
top:10px;
bottom:10px;
right:10px;
background-color:white;
overflow:hidden;
text-align:center;
box-shadow: 0 0 10px rgba(0,0,0, 0.2);
}
Adjust course-card-aspect-ratio value to the multiple you desire.
Here is the working fiddle.
Or with jQuery:
$("#yourimageselector").height($(window).height());
I have two images which need to be over each other. The images have to also be responsive and therefore have a percentage width and height.
<div class="container">
<img src="res/bigger.png/>
<img src="res/smaller.png class="icon"/>
</div>
.container {
width:100%;
height:100%;
background-color:blue;
postion:relative;
}
.container img {
max-width:100%;
max-heihgt: 100%;
height: auto;
width: auto;
}
.icon {
position: relative;
top: -70%;
left: 20%;
z-index: 50;
width: 10% !important;
height: auto !important;
}
As the two images do not have the same proportions when re-sized the smaller image which is on top of the bigger image will lose its position relative to the bigger image. How could I maintain the position of the smaller image relative to the bigger image when I re-size the page?
An example of this problem could be found here http://jsfiddle.net/5YQFV/
How about, instead of using two images you would replace the largest image with a container like this
<div class="the-gang">
<img src="res/smaller.png" />
</div>
And then set the position of the container to position:relative but the position of the smaller image to position:absolute like this
.the-gang{
position:relative;
width:100px;
height:75px;
}
.the-gang img{
position:absolute;
top:10px;
left:10px;
}
This way the smallest image will always stay where you place it, as the absolute position will be relative to it's container.
The possible disadvantage is that you have to set minimal height and width of the parent container, but the advantage is that it will be done purely in CSS and no javascript will have to be used.
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; }