I inserted an image into a tag by giving it a class of .img-circle. Now the circle that it yielded is too small and I want to increase the radius.
I even tried giving the <img> tag an attribute of width="35px", but the image circle did not change.
Please, suggest CSS3 methods or with jQuery.
img-circle Bootstrap class only formats the border in such way that it takes the circle form:
.img-circle {
border-radius: 50%;
}
It does not affect the size of your image at all.
You only need to increase your image and this "circle" will increase with it.
Here is the example with three images of type img-circle with different sizes described by CSS classes or inline styling:
.big-image {
height: 100px;
width: 100px;
}
.small-image {
height: 64px;
width: 64px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<!-- Original square image -->
<img class="big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Big circle image with CSS class rule -->
<img class="img-circle big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Small circle image with CSS class rule -->
<img class="img-circle small-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Circle image with inline style -->
<img class="img-circle" style="height: 16px; width: 16px;" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
Related
I have multiple div with class called card. I need my all div to be same height and same width. I want to add images to those div. I have different images with different aspect ratios. Also I want whole image filled inside the div. (I want to prevent from cropped images). Therefore, If I can convert all images into same aspect ratio first, then it should be okay. Then I can set .card-img {width=100%}. Height should be same for all images because .card has same width and all images have same aspect ratio. How can I make this work as I mentioned?
<div class="card">
<img class="card-img" src="img-1.jpg" alt="" />
</div>
<div class="card">
<img class="card-img" src="img-2.jpg" alt="" />
</div>
<div class="card">
<img class="card-img" src="img-3.jpg" alt="" />
</div>
.card{
width: 270px
height: 400px;
}
Assume img-1.jpg, img-2.jpg, img-3.jpg has different aspect ratios.
You can't force an image to have a different aspect ratio from its natural one without either cropping or distorting it. You say you don't want to crop so that is not a possibility and you would be unlikely to want to distort it (stretch it in one direction or the other).
What you can do is make sure that the whole image is always visible is use contain instead of cover.
Obviously this means there will be space either at the top and bottom or at the sides of your cards in some cases but this is an inevitable consequence of the no-cropping requirement.
I have faced the same problem many a times. Unfortunately the only options we have available when height and width are fixed are:
Use object-fit: cover on the img element. This results in some cropping.
Use object-fit: contain on the img element. This ensures there is no cropping but adds whitespace around the image.
If you are okay with differing height and width, then you have the option to use a masonry layout as described here:
https://masonry.desandro.com/layout.html
Easy, just set max width and max height to 100% and let the browser sort it out.
.card {
width: 270px;
height: 400px;
border: 1px solid #333;
}
.card img {
max-width: 100%;
max-height: 100%;
}
<div class="card">
<img class="card-img" src="https://picsum.photos/370/400" alt="" />
</div>
<div class="card">
<img class="card-img" src="https://picsum.photos/400/100" alt="" />
</div>
<div class="card">
<img class="card-img" src="https://picsum.photos/400" alt="" />
</div>
This is in case you want the image element. If you want the image as a background, use the contain property.
UPDATE
If you want the images to fill the cells, use
.card img {
width: 100%;
height: 100%;
}
But this will stretch the image. These are the two options you have without cropping.
current situation
I have a fabric canvas placed inside a parent div. how can i stretch the canvas to the full width and height of its parent
Here is what my code look likes:
<div class="design_editor_div">
<canvas id="c" width="500" height="500" style="border-style:dashed;border-color:#a1a1a1;text-
align:center;border-width:initial;"></canvas>
<img src="{{ '2.png' | asset_url }}" title="" alt="" style="display: none" id="img">
</div>
You can use css and select the child element of the div as such:
canvas > div {
display: block;
width: 100%;
height: 100%;
}
For sure, use a seperate stylesheet and include a <link>path-to-stylesheet</link> in the head or <style> css... </style> tags in the head of your html document. Inline CSS styles should be reserved for elements that you need to alter that are very unique, such as making part of a or <p> element <strong> or <u>. Including many <style> tags inline will impact the readability of the tag.
<img onmouseover="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
Its not working. It comes up as a box, not a broken image but a box which doesn't display the image. I'm adding it to my website, could i be putting it in the wrong place? Also, i put it in my forum wrapper and i want the image to be displayed and when you hover your mouse over it so it changes to image 2 please help.
If you intend the image to change on mouseover, you can use this:
<img onmouseover="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png'"
onmouseout="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png'"
src="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
this.src='something'
will set the image src to something.
However, it would be prettier to use CSS and have it as background image, then it will work without javascript.
Please use some CSS, that inline style code gets so confusing.
If you want to do it the nice way do something like this:
#facebook {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png") no-repeat;
width: 231px;
height: 231px;
margin-top: -12px;
margin-right: -60px;
}
#facebook:hover {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png") no-repeat;
}
<div id="facebook"></div>
This may not be right but from looking at your code your img script doesnt end.
You need to have />
This is a bit strange question but I am trying to use the cycle plugin to display only one image. That is just to use the various effects the plugin is providing. I have a row of images with certain text and each image/text will be hosted inside a div tag which will be enclosed by the cycle plugin. At certain times, different div tag will have some animation effect using the plugin's cycle function. I think I can add the same div tag to work around this but I am wondering if anyone knows how to do what I want to do.
If you're trying to cycle between DIVs that have the same image but different text then, yes, you can do that. Here's a basic example.
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<style type="text/css">
.slideshow { position: relative }
.slideshow div { position: relative; }
.slideshow div span { position: absolute; top: 5px; left: 5px; }
</style>
<div class="slideshow">
<div>
<span>Here's some text!</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Some more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Even more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
</div>
I have an href image in this markup.
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="http://image.com/image.jpg" width="100" height="100">
</a>
</div>
When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?
My CSS looks like this but it still doesn't work
a.imga:hover {
background-image: url('over.png');
background-position: top;
z-index:3;
}
**Here is the solution you can try**
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
</a>
</div>
Use can do it with CSS, but insted of img tag use a DIV with a background image
<div id="image"></div>
CSS style
#image{
width: 100px; //Image height
height: 100px; //Image width
background: url('') 0 0 no-repeat; //Give your image path here
}
#image:hover{
background: url('') 0 0 no-repeat;
}
Try CSS Sprites, check out this screen-cast from css-tricks.com on how to use them.
You can use :hover pseduo selector on the div with class imgdiv with background-position set appropriately to show on the top right corner. Off course, you should apply background-image to the div first.
Note that :hover does not work in IE6 for anything other than links. However, you can overcome this limitation by using javascript/jquery.