CODEWITHSUNDEEP
cssclip-path
Bryan Chuah
Bryan Chuah

Reputation: 3

CSS Clip-Path Generator not working for me

How to fit my image in the correct position? I just straight away copy the code from CSS path maker through website. But I couldn’t resize the image from my actual image in HTML. May I know what are the codes that needed or any way to fix the image?

My Code script

.brazilimg{ background-image:url("image/brazil.jpg"); clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); width: 280px; height:280px; margin-top:400px; margin-left:60px; }

[my code script][1]

[CSS Clip Path Generator][2]

My final outcome after entering the code

The original image that I want to create image clipping

Upvotes: 0

Views: 663

Answers (1)

A Haworth
A Haworth

Reputation: 36564

Your CSS is clipping the image but the image is not centred within the div so you get just the top part. Also there is a large top margin which means you just see the top part, as shown in your image in the question. Here's the whole clipped image - as you see, just the top part.

enter image description here

If we add to the .brazilimg class something that tells the system to center the image within the div, clipping the right and left sides so as to maintain the image's aspect ratio, we see the correct image. background-size: cover; is what we have added.

enter image description here

Here is a snippet showing the problem before the image is centred, but with the large top margin commented out so we see the whole image:

.brazilimg{
 background-image:url("https://i.sstatic.net/bUUz7.jpg");
 clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
 width: 280px;
 height:280px;
 /*margin-top:400px;*/
 margin-left:60px;
 }
<div class="brazilimg"></div>

And here is a snippet with the cover added to centralise the image:

.brazilimg{
 background-image:url("https://i.sstatic.net/bUUz7.jpg");
 clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
 width: 280px;
 height:280px;
 /*margin-top:400px;*/
 margin-left:60px;
  /* added to ensure the image is centrally located */
 /* and make this CSS class more general for different images' aspect ratios */
  background-size: cover;
 }
<div class="brazilimg"></div>

Upvotes: 0

Related Questions