I'm trying to create a border that sits INSIDE an image. So, there should be a 10px or so margin from the edge of the photo to where the border is.
Examples of what it should look like: http://imgur.com/a/lMSMR
You can see the page with the photos here: http://blueboxluxe.com/praise/
Anyways, few parts of this is harder to do... 1) the layout is fluid -- the photo size can change. 2) I want the border to show up on all photos -- no matter the size. 3) On the praise page, there's a lot of floats happening; so, things need to work with that correctly.
I've tried playing with box-shadow, but all I get is a border on the outside of the image. Not inside.
Try the outline property and specify a negative offset:
outline:2px solid red;
outline-offset:-15px;
No IE support though!
you can also try a container div
<div><img src=""/></div>
give div a fixed height and width and overflow hidden.
div{height:100px;width:100px;overflow:hidden;border:1px solid black;}
Maybe create a div within the div that contains the image, set it to
position:absolute;
margin:2% auto;
left:2%;
width:96%;
border:solid 1px #fff;
and then give the element that is containing it:
text-align:center;
Alternatively, if the image is floating in a much larger div that contains other elements, put it into a parent div set to the size of the image then put the new div that will add the border underneath or above the image; do not put the image into the div that you want to use as a border; the reason I used percentages is because it should then resize depending on the size of the image.
If you play around with the numbers it should work as you wish.
you can use the box-shadow property in css3. Use a 1px thick box-shadow with a color would give you that effect on almost all browsers.
Related
There is a white border surrounding the banner of the website and it's really annoying me. It is like some sort of border about a width of 10px and white. This takes place at the top of the website.
I would have uploaded a picture, but it won't let me.
Anyways, this is all of the code for the banner:
.image{
padding:0;
margin:0 auto;
width:100%;
}
Is there any possible way I can remove this white border?
Edit:
I solved it by changing the image into a div and making the image the background of the div and positioned it to left by 0 and top by 0.
try adding border: 0 !important;
First thing first check image outer element if have any sort of padding margin or border, if yes then remove it otherwise jus give image width of 100vw instead of 100% .
OK here's a challenging one! I really want to see if this can be accomplished with CSS only if possible.
I have a unique layout that requires images to be sized and positioned based on their parent container. If the image exceeds it's parent in height or width I need it to reduce size to fit. At the moment I'm using max-width and max-height together and it's working fine. The image resizes to fit and of course keeps it's aspect ratio.
Now here's the tricky part. I need to add a special shadow to this image that cannot be accomplished with CSS box shadows. The shadow uses PNG image. The shadow needs to be sized and positioned in relation to the image - meaning it falls at the bottom of the image and it equals the width of the image.
Normally I would achieve the shadow with ::after and size and position it relative to it's parent element, which works perfectly Except it's parent is the image and images do not allow ::before or ::after.
So as far as I can tell, the only way to achieve this is to wrap the image in another container so I can use that container as the parent elements and positioning reference for the shadow layer. But I cannot find a way to make that container div behave in the same way as the image in terms of the max-width and max-height sizing while still maintaining it's aspect ratio.
The best methods for maintaining aspect ratios use padding top, which works brilliantly when the width is the only important factor. But the padding-top technique doesn't allow for the container to have a max-height.
So I'm looking for a CSS technique that will allow a block element to maintain its aspect ratio, and have max-width and max-height at the same time. Similar to how an image would behave in this situation.
I've scoured the internets for a solution and haven't seen anyone describe this exact situation. Would be extremely grateful to anyone who can assist.
Added 1 Sept 2017:
I should mention that it's more than just the shadow I need to position relative to the image. There are some other elements as well that need to be positioned in this way, and those other elements are not simple background images. So while Lightbender's solution is great for the shadow, it doesn't solve the bigger issue at hand. I need a container around the image that I can use as reference to position other child elements.
While before and after won't work (easily) but you can still use padding and a background image and it will work exactly the way your current setup works.
img.fancyshadow {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
padding: 0 10px 10px 0; /* adjust as needed */
background: url('path/to/your/shadow');
box-sizing: border-box;
}
I don't have a Mac handy, so I've only tested this in Firefox, Chrome, and IE, can anyone confirm Safari as well?
So I would like to see a simple example of what you are attempting as a starting point but you mentioned that the images need to be sized/positioned based upon the size of their container.
Here is an starting example of something like that. Not sure if it can be modified to suit your issue. Let me know and I can tweak.
When needing to have responsive images, I never use IMG tags. Setting the background image in CSS provides much more control on responsive sites/apps.
Documentation on background-size:
cover Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
contain Scale the image to the largest size such that both its width
and its height can fit inside the content area
$(function() {
$('.banner').resizable();
});
.banner {
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/15/ae/a6/15aea601612443d5bddd0df945af6ffd.jpg');
background-size: cover;
background-position: center;
height: 175px;
width: 100%;
}
p {
color: #666;
}
.ui-resizable-se {
box-shadow: -1px -3px 10px 3px white;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<h1>Resize the image using the black triangle at bottom right of image</h1>
<p>Note how the image fills the container and the position is always centered (you can control where the position is, doesn't have to be in the center)</p>
<div class="banner">
</div>
I just finished building part of my website using Twitter's BootStrap, but am looking on ways to improve it. This module has an image of known width but unknown height (image height will vary but has fixed width) and has text on top of the image. I originally built this by having an image tag inside a div, then using position:absolute; top:0; to move a layer a text above it.
I don't like the idea of using position:absolute;. My alternative solution is to treat the image as a background of a div that contains the text. However, by doing so, I have encountered two problems:
I don't know how to specify the height of the div as this is a
variable based on the height of the image. The width will always be
of span4 (300px). Each image will only have a few words at most
therefore not enough to take up the entire vertical space of the
div.
As the browser width shrinks, part of the background div gets
cropped off. This is because BootStrap is trying adjust for
responsiveness. How would I fix this?
I am completely stumped, and I feel that this alternative solution is not possible without being able to define a definite height. Is there a better alternative?
My code:
<div class="span4 cell">
This is a placeholder image
</div>
.cell { background: url(http://www.placehold.it/300x200) no-repeat; }
Just to be clear, here is an image of what I am trying to create:
Demo................................
HI now used to this
.span4.cell {
background:url("http://www.placehold.it/300x200.jpg") no-repeat;
width:300px;
height:200px;
}
Live demo
Try this css code. It set height as auto.
remove if you don't want border.
.cell {
background:url("http://i.stack.imgur.com/klttw.jpg") no-repeat;
width:300px;
height:200px;
border: 1px solid red;
}
Try this demo: jsfiddle
I am trying to figure out the best approach to have a link with an image floated next to it inline, that will force the link to become multi-line as needed while keeping the image inline floated next to it.
I setup an example here - http://jsfiddle.net/ubernoob/tYeGR/
If you size the result window you will see that once it hits a small enough width the image will fall below the link.
How can I code this so the link will go to multi-line and leave the image floated next to it?
Try putting <img> tag before <h3> and remove float:left from <h3>
I've edited the jsfiddle: http://jsfiddle.net/tYeGR/7/
this example works: http://jsfiddle.net/jalbertbowdenii/tYeGR/18/ but i changed your floats to absolutely positioning the img's. if that's not good enough, #mediaqueries are the way to go. i tried two in jsfiddle but to no vail. probably user error.
You can absolutely position the images in their rows and then add some padding to the <h3> elements so the links don't get covered by the images:
.list img {
position : absolute;
right : 10px;
}
.list h3 {
float : left;
font-size : 12px;
padding : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/
min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/
}
Here is a jsfiddle to mess around with: http://jsfiddle.net/jasper/tYeGR/19/
I have an image and a border on the bottom of the div that contains it. The problem is that I want the border to be directly on the bottom edge of the image. Instead, there seems to be some natural padding on the bottom that I want to get rid of. How can I do this?
You need to set the images vertical align to top in your CSS :)
img { vertical-align: top /* can be baseline */ }
Hope that helps!
To put border on image
img{
border:1px solid #000;
}
Please share your code to solve your padding issue.
Why don't you apply the border directly to the IMG tag instead of its container DIV?