wrap text around image css responsive

Wednesday , 5, May 2021 1 Comment

Wrap Text Around an image is very attractive for any kind of website

but the image can be in different shapes .circle , square etc , . We have to wrap that image with the text. By using HTML and CSS wrapping an image with the text is possible and there are many ways to do so because the shape of any image is not constant.

Wrapping a text around an image, we can either align the image on the right side of the text, or the left side or the center of text, besides these we can also insert the images in a circle or rectangle, etc. and can wrap a text around it. You can also use CSS shape-outside Property depending on the shape of your image.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        .content {
                height: 330px;
                width: 500px;
                margin: auto;
                margin-top: 198px;
                text-align: justify;
                background: #5a5a5a;
                padding: 13px;
                color: #ececec;
            }
        .img_pro{
            border-radius: 50%;
            float: left;
            shape-outside: border-box;
            margin: 5px;
            height: 164px;
        }
    </style>
</head>
<body>
        <div class="content">
            <img class="img_pro" src="img_avatar.png" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Nihil culpa suscipit eum? Unde vitae in explicabo odit architecto accusantium facere omnis totam. Iste ab dolores doloribus at provident nobis quod.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Nihil culpa suscipit eum? Unde vitae in explicabo odit architecto accusantium facere omnis totam. Iste ab dolores doloribus at provident nobis quod.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Nihil culpa suscipit eum? Unde vitae in explicabo odit architecto accusantium facere omnis totam. Iste ab dolores doloribus at provident nobis quod.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Nihil culpa suscipit eum? Unde vitae in explicabo odit architecto accusantium facere omnis totam. Iste ab dolores doloribus at provident nobis quod.</p>
        </div>       
</body>
</html>

Here are the most important CSS declarations is float: right; or float: left; and shape-outside: circle();

The shape-outside property controls how content will wrap around a floated element’s bounding-box.

The float property specifies image position to left or right.

Tags:
One commnet
  • 먹튀폴리스 says:

    I enjoy what you guys tend to be up too. This sort oof
    clever work and coverage! Keep up the greazt works
    guys I’ve added you guys to my own blogroll.

  • Leave a Reply

    Your email address will not be published. Required fields are marked *