Image proportional to the system used. Can I continue doing so?

Question

tried many ways and did not succeed. So I went on my own and found a solution.

I wonder if I can keep using like this or if I’ll have a problem with it...

Well, in the notebook browser the image is perfectly normal like this:, in an HTML code:

<img src="imagens/foto1.png">

But when cell phone access the page, it gets too big. I tried to make CSS with width = 100% and auto and it didn’t work (when it looked good on the phone, it wasn’t in the notebook browser and vice versa).

Then I made a small PHP function that identifies if the page is being accessed by the notebook or mobile phone.

That way it’s working perfectly, but I want to know if I’ll have problems.

PHP code on the page:

<?php
  if ($utilizador == "celular") { 
   echo "<img style='width:100%' src='imagens/foto1.png'>";
}
  else {
   echo "<img src='imagens/foto1.png'>";
}
?>

This way it is perfect both on mobile (with width) and in the browser, without width.

I can keep doing it like this?

Function to verify:

<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$symbian =  strpos($_SERVER['HTTP_USER_AGENT'],"Symbian");

if ($iphone || $ipad || $android || $palmpre || $ipod || $berry || $symbian == true) {
    $utilizador = "celular";
}
else {
 $utilizador = "pc";
}
?>

Answer 1

I find it unnecessary when CSS already offers properties for this.

Besides width, CSS also offers max-width and min-width, that is, maximum width and minimum width. Combining these properties as follows:

<img src="pic.jpg" style="width: 100%; max-width: 500px">

You will have an image that occupies 100% of the width of your parent element, but if this width is extrapolate 500px, the image remains at maximum 500px width.

This way you have the image occupying the maximum width on your mobile phone, but on larger screens the width is limited to not get exaggerated proportions.