CODEWITHSUNDEEP
bootstrap-4
Paulius Kvasnickis
Paulius Kvasnickis

Reputation: 1

How to fix rounded-img issue on mobile

I have an rounded image in my website, and on computer it is fine, but on mobile or on resized browser it's like this:

enter image description here

Code:

 <img src="'.$cover.'" class="rounded-circle img-profile" style="height:75px; width:75px; border: none;" alt="avatar">

How can I fix this issue?

Upvotes: 0

Views: 31

Answers (1)

Muhammad Ibrahim
Muhammad Ibrahim

Reputation: 11

In the image class, you can put " class="img img-responsive" " as in the following example:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!-- Latest compiled and minified CSS -->

<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />

    <!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 

type="text/javascript"></script>

    <!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" 

type="text/javascript"></script>

<meta charset="utf-8" />

</head>

<body>

 <img src="$cover" class="rounded-circle img-profile img-responsive" 

style="height:75px; width:75px; border: none;" alt="avatar">

</body>

</html>

And if you want to use this code make sure you insert the bootstrap code:

 <!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />

    <!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"type="text/
javascript"></script>

    <!-- Latest compiled JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" type="text/javascript"></script>

Upvotes: 1

Related Questions