I would like to inquire if is it possible to display only the part of an image depending on the image width x height using only CSS? (If it is not possible with only CSS then TypeScript only)
Example if I have an image which is 2,434px × 1,697px inside a div that is around 700x700, how to show only a particular part, like the whole upper part of the image only?
.image-container {
height: 700px;
width: 700px;
border: 2px solid black;
overflow: hidden;
}
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg">
</div>
From the code it shows only somewhat the upper left, but I need the whole upper part of the image: like below
needed image
object-fit and object-position can help you here:
.image-container {
height: 200px;
width: 700px;
border: 2px solid black;
overflow: hidden;
}
img {
height:100%;
width:100%;
object-fit:cover;
object-position:top;
}
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg">
</div>
I am not able to position an image within a div so that:
it's higher than the div and sticks out
starts at the very bottom of the div (there is a small gap that I can't close)
This is the relevant HTML:
<div class="teaser-image-wrapper">
<div class="wrap">
<img class="image2 more-height" src="images/svg/creativeyou.svg" alt="Creative You! Title Image">
</div>
</div>
And the CSS I have:
.teaser-image-wrapper {
background-color: #83ffcd;
width: 100% !important;
margin:
}
.wrap {
width: 80%;
}
.teaser-image-wrapper img {
padding: 0 !important;
object-fit: contain;
max-height: 75vh;
max-width: 100%;
line-height: 0;
}
Here is an image for reference: The greenish background of the wrapper (.teaser-image-wrapper) should be lower than the image (svg) that should stick out on the top. Also, notice the little gap at the bottom.
Thank you for any hints
The easiest way to achieve something like this could be to use position absolute and relative. Maybe try setting the class wrap to relative and the image absolute, with
left:0;
right:0;
bottom:0;
and then play around with the position of 'top', can then set a height of the wrap class to try and achieve the desired effect. May be better ways to do this but without playing about with it this is what is off the top of my head. hope this helps
OK, after some tinkering solved it.
I wanted to achieve this:
This is the CSS. I basically push the wrapper - div down while pulling the image inside up.
.teaser-image-wrapper {
max-width: 80%;
margin: 40vh 10% 0;
padding: 0;
line-height: 0;
}
.wrap {
width: 100%;
background-color: #83ffcd;
height: 50vh;
margin-top: 25vh;
}
.teaser-image-wrapper img {
padding: 0 !important;
object-fit: cover;
height: 75vh;
width: 100%;
line-height: 0;
position: relative;
margin-top: -25vh;
}
This question already has answers here:
Easier way to create circle div than using an image?
(15 answers)
Closed 8 years ago.
i want to create a div with background color red and completely circular in shape
How can i do that?
Css or jquery both can be used
You can do following
FIDDLE
<div id="circle"></div>
CSS
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Other shape SOURCE
By using a border-radius of 50% you can make a circle.
Here is an example:
CSS:
#exampleCircle{
width: 500px;
height: 500px;
background: red;
border-radius: 50%;
}
HTML:
<div id = "exampleCircle"></div>
Demo
css
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
html
<div></div>
HTML div elements, unlike SVG circle primitives, are always rectangular.
You could use round corners (i.e. CSS border-radius) to make it look round. On square elements, a value of 50% naturally forms a circle. Use this, or even a SVG inside your HTML:
document.body.innerHTML+='<i></i>'.repeat(4);
i{border-radius:50%;display:inline-block;background:#F48024;}
svg {fill:#F48024;width:60px;height:60px;}
i:nth-of-type(1n){width:30px;height:30px;}
i:nth-of-type(2n){width:60px;height:60px;}
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="60"/>
</svg>
Use a border-radius property of 50%.
So for example:
.example-div {
border-radius: 50%
}
.circle {
border-radius: 50%;
width: 500px;
height: 500px;
background: red;
}
<div class="circle"></div>
see this FIDDLE
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 5 years ago.
Sorry if this has been answered but I can't find it anywhere!!
I need a transparent triangle cut out of a white div (to form a down arrow), I get that it could be css shapes to do it, but the thing I'm stumped on is how to create two 100% width white blocks on either side...
Like this:
Any help would be great.
Many thanks
Now you've provided an image, I'll change my answer to what you actually want.
The trick I'd use is to create :before and :after elements that are absolutely positioned, one left and one right. Each one has borders to create the shapes. The key to this is the box-sizing trick which means that the borders are inside the width, rather than added onto, allowing us to define a 50% width for the :before and :after pseudo elements.
Note that the image I'm using as the background in this demo is rectangular, it doesn't have the triangle in the image!
HMTL
<div class="box">
I'm a box.
</div>
CSS
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.box {
background: transparent url('http://i.imgur.com/ipGvBz0.png') no-repeat;
padding: 20px;
min-height: 200px; /* Just to show the image */
margin: 10px;
position: relative;
}
.box:before,
.box:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 50%;
border-bottom: 20px solid white;
}
.box:before {
left: 0;
border-right: 20px solid transparent;
}
.box:after {
right: 0;
border-left: 20px solid transparent;
}
DEMO
Nota bene:
The original wording of the question was somewhat ambiguous so this answer isn't exactly spot-on.
Regardless, it's still widely applicable for many similar situations.
The general idea can easily be demonstrated with SVG.
The details of the execution are up to your specific situation and you will need to change them accordingly.
See a Jsfiddle example
SVG images can also be used as background-images if your situation requires that. Alternatively you can hack it by positioning the existing div absolutely and z-indexing it.
See this guide on how to build SVG shapes like the one below: SVG path element on Jenkov.com
See this article for information on SVG fill principles: SVG fill on Jenkov.com
HTML used in the sample:
<div id="your_div">
<svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">
<path d="M 0,0 L 100,0 100,10 0,10 0,0 M 50,8 L 55,6 52,6 52,2 48,2 48,6 45,6 z" style="fill: white; fill-rule: evenodd;"></path>
</svg>
</div>
CSS used in the example:
body {
background-image: url(http://i.imgur.com/XxGffrU.jpg);
background-size: cover;
background-position: center bottom;
min-height: 1000px;
margin: 0;
}
#your_div {
position: fixed;
top: 30%;
width: 90%;
left: 5%;
height: 100px;
}
#back {
width: 100%;
height: 100%;
}
Disclaimer: I'm not affilated with the linked webpage in any way, they merely have comprehensive guides on the subject.
You can use a relatively positioned wrapper and use left:50%; and margin-left:-(half of div width here) in the triangle CSS, as you can see here:
CSS:
.wrapper{
position:relative;
width:50px; /* Same width as .black */
}
.black{
background:black;
width:50px;
height:25px;
}
.triangle {
position:absolute;
width: 0;
height: 0;
border-left: 5px solid transparent; /* Half of triangle width */
border-right: 5px solid transparent; /* Half of triangle width */
border-top: 5px solid black; /* Triangle height */
border-bottom: 0px solid transparent;
left:50%;
margin-left:-5px; /* Half of triangle width */
}
HTML:
<div class="wrapper">
<div class="black"></div>
<div class="triangle"></div>
</div>
Simple demo
Styleful demonstration with text inside div
I have an image, and I want to set it a specific width and height (in pixels)
But If I set width and height using css (width:150px; height:100px), image will be stretched, and It may be ugly.
How to Fill images to a specific size using CSS, and not stretching it?
Example of fill and stretching image:
Original Image:
Stretched Image:
Filled Image:
Please note that in the Filled image example above: first, image is resized to 150x255 (maintained aspect ratio), and then, it cropped to 150x100.
You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
See example here
There's a polyfill for IE: https://github.com/anselmh/object-fit
Related: object-position (specifies the alignment of an element's contents within its box.)
If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
.container {
width: 150px;
height: 100px;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
<div class="container"></div>
While cover will give you a scaled up image, contain will give you a scaled down image. Both will preserve the pixel aspect ratio.
http://jsfiddle.net/uTHqs/ (using cover)
http://jsfiddle.net/HZ2FT/ (using contain)
This approach has the advantage of being friendly to Retina displays as per Thomas Fuchs' quick guide.
It's worth mentioning that browser support for both attributes excludes IE6-8.
Enhancement on the accepted answer by #afonsoduarte.
in case you are using bootstrap
There are three differences:
Providing width:100% on the style. This is helpful if you are using bootstrap and want the image to stretch all the available width.
Specifying the height property is optional, You can remove/keep it as you need
.cover {
object-fit: cover;
width: 100%;
/*height: 300px; optional, you can remove it, but in my case it was good */
}
By the way, there is NO need to provide the height and width attributes on the image element because they will be overridden by the style. so it is enough to write something like this.
<img class="cover" src="url to img ..." />
The only real way is to have a container around your image and use overflow:hidden:
HTML
<div class="container"><img src="ckk.jpg" /></div>
CSS
.container {
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
It's a pain in CSS to do what you want and center the image, there is a quick fix in jquery such as:
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);
http://jsfiddle.net/x86Q7/2/
CSS solution no JS and no background image:
Method 1 "margin auto" ( IE8+ - NOT FF!):
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
top:0;
bottom:0;
margin: auto;
width:100%;
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
http://jsfiddle.net/5xjr05dt/
Method 2 "transform" ( IE9+ ):
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
width:100%;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
http://jsfiddle.net/5xjr05dt/1/
Method 2 can be used to center an image in a fixed width / height container. Both can overflow - and if the image is smaller than the container it will still be centered.
http://jsfiddle.net/5xjr05dt/3/
Method 3 "double wrapper" ( IE8+ - NOT FF! ):
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: table;
left: 50%;
}
.inner img {
display: block;
border: 1px solid blue; /* just for example */
position: relative;
right: 50%;
opacity: .5; /* just for example */
}
<div class="outer">
<div class="inner">
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>
http://jsfiddle.net/5xjr05dt/5/
Method 4 "double wrapper AND double image" ( IE8+ ):
.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 50%;
bottom: 0;
display: table;
left: 50%;
}
.inner .real_image {
display: block;
border: 1px solid blue; /* just for example */
position: absolute;
bottom: 50%;
right: 50%;
opacity: .5; /* just for example */
}
.inner .placeholder_image{
opacity: 0.1; /* should be 0 */
}
<div class="outer">
<div class="inner">
<img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<img class="placeholder_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>
http://jsfiddle.net/5xjr05dt/26/
Method 1 has slightly better support - you have to set the width OR height of image!
With the prefixes method 2 also has decent support ( from ie9 up ) - Method 2 has no support on Opera mini!
Method 3 uses two wrappers - can overflow width AND height.
Method 4 uses a double image ( one as placeholder ) this gives some extra bandwidth overhead, but even better crossbrowser support.
Method 1 and 3 don't seem to work with Firefox
Solution not requiring image as a background and will auto-resize without being cut-off or distorting.
Another solution is to put the image in a container with the desired width and height. Using this method you would not have to set the image as a background image of an element.
Then you can do this with an img tag and just set a max-width and max-height on the element.
CSS:
.imgContainer {
display: block;
width: 150px;
height: 100px;
}
.imgContainer img {
max-width: 100%;
max-height: 100%;
}
HTML:
<div class='imgContainer'>
<img src='imagesrc.jpg' />
</div>
Now when you change the size of the container the image will automatically grow as large as it can without going outside the bounds or distorting.
If you want to center the image vertically and horizontally you can change the container css to:
.imgContainer {
display: table-cell;
width: 150px;
height: 100px;
text-align: center;
vertical-align: middle;
}
Here is a JS Fiddle http://jsfiddle.net/9kUYC/2/
Not using css background
Only 1 div to clip it
Resized to minimum width than keep correct aspect ratio
Crop from center (vertically and horizontally, you can adjust that with the top, lef & transform)
Be careful if you're using a theme or something, they'll often declare img max-width at 100%. You got to make none. Test it out :)
https://jsfiddle.net/o63u8sh4/
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
min-width:100%;
min-height:100%;
height:auto;
position:relative;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
Building off of #Dominic Green's answer using jQuery, here is a solution that should work for images that are either wider than they are high or higher than they are wide.
http://jsfiddle.net/grZLR/4/
There is probably a more elegant way of doing the JavaScript, but this does work.
function myTest() {
var imgH = $("#my-img").height();
var imgW = $("#my-img").width();
if(imgW > imgH) {
$(".container img").css("height", "100%");
var conWidth = $(".container").width();
var imgWidth = $(".container img").width();
var gap = (imgWidth - conWidth)/2;
$(".container img").css("margin-left", -gap);
} else {
$(".container img").css("width", "100%");
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight)/2;
$(".container img").css("margin-top", -gap);
}
}
myTest();
after reading StackOverflow answers the simple solution I got is
.profilePosts div {
background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;
}
I helped build a jQuery plugin called Fillmore, which handles the background-size: cover in browsers that support it, and has a shim for those that don't. Give it a look!
This will Fill images to a specific size, without stretching it or without cropping it
img{
width:150px; //your requirement size
height:100px; //your requirement size
/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
object-fit:scale-down;
}
Try something like this: http://jsfiddle.net/D7E3E/4/
Using a container with overflow: hidden
EDIT: #Dominic Green beat me.
I think it's quite late for this answer. Anyway hope this will help somebody in the future.
I faced the problem positioning the cards in angular. There are cards displayed for array of events. If image width of the event is big for card, the image should be shown by cropping from two sides and height of 100 %. If image height is long, images' bottom part is cropped and width is 100 %. Here is my pure css solution for this:
HTML:
<span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>
CSS
.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}
you can do it by 'flex' display. for me!:
.avatar-img {
display: flex;
justify-content: center;
align-items: stretch;
border-radius: 50%;
border: 1px solid #dee2e6;
height: 5.5rem;
width: 5.5rem;
overflow: hidden;
}
.avatar-img > img {
flex-grow: 1;
object-fit: cover;
}
<div>
<div class="avatar-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqczw3Fb_TYsj0hbPEy0u7Ay2bVq1KurD6hw&usqp=CAU" alt="Test!'s profile photo">
</div>
<div class="avatar-img">
<img src="https://i.pinimg.com/236x/a1/37/09/a137098873af3bf6180dd24cbe388ae9--flower-iphone-wallpaper-wallpapers-flowers.jpg" alt="Test!'s profile photo">
</div>
</div>
To fit image in fullscreen try this:
background-repeat: round;
<div class="container">
<img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>
<style>
.container {
width: 150px;
height: 100px;
overflow: hidden;
}
</style>
As far as I know, there is a plugin to make this simple.
jQuery Plugin: Auto transform <img> into background style
<img class="fill" src="image.jpg" alt="Fill Image"></img>
<script>
$("img.fill").img2bg();
</script>
Besides, this way also fulfills the accessibility needs. As this plugin will NOT remove your <img> tag from your codes, the screen reader still tells you the ALT text instead of skipping it.
you have to use background-size : cover in the css
js code
<div>
<div className={styles.banner}>banner</div>
</div>
css code
.banner{
background:
url("./images/home-bg.jpg");
background-size: cover;
height: 53rem;
width: 100%;
}
object fit is not working
background-size: contain is also not working