I am using bootstrap and I would like the images regardless of what size they were placed on the server to be of the same size
I am using bootstrap and I would like the images regardless of what size they were placed on the server to be of the same size
CSS will solve your problem, but from what I saw on your site your image is 3000px wide, the best would be to decrease the size of it on the same server, see.
I use this code below to do this function, where $max_x
is the final width of the image and $max_y
its height. Note that $vDestino1
must be the original image (the file that is rising) and $vDestino2
is the path where the small image will be saved.
$max_x = 150;
$max_y = 150;
list($width, $height) = getimagesize($vDestino1);
$original_x = $width;
$original_y = $height;
if($original_x > $original_y){
$porcentagem = (100 * $max_x) / $original_x;
}else{
$porcentagem = (100 * $max_y) / $original_y;
}
$tamanho_x = $original_x * ($porcentagem / 100);
$tamanho_y = $original_y * ($porcentagem / 100);
$image_p = imagecreatetruecolor($tamanho_x, $tamanho_y);
switch (strtolower(substr($vDestino1, -3))){
case "jpg":
$image = imagecreatefromjpeg($vDestino1);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $tamanho_x, $tamanho_y, $width, $height);
imagejpeg($image_p, $vDestino2, 90);
break;
case "gif":
$image_p = imagecreatetruecolor($tamanho_x, $tamanho_y);
imagealphablending($image_p, false);
imagesavealpha($image_p,true);
$transparent = imagecolorallocatealpha($image_p, 255, 255, 255, 127);
imagefilledrectangle($image_p, 0, 0, $tamanho_x, $tamanho_y, $transparent);
$image = imagecreatefromgif($vDestino1);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $tamanho_x, $tamanho_y, $width, $height);
imagegif($image_p, $vDestino2);
break;
case "png":
$image_p = imagecreatetruecolor($tamanho_x, $tamanho_y);
imagealphablending($image_p, false);
imagesavealpha($image_p,true);
$transparent = imagecolorallocatealpha($image_p, 255, 255, 255, 127);
imagefilledrectangle($image_p, 0, 0, $tamanho_x, $tamanho_y, $transparent);
$image = imagecreatefrompng($vDestino1);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $tamanho_x, $tamanho_y, $width, $height);
imagepng($image_p, $vDestino2);
break;
}
To resize ALL images on the page at once, try this in your css:
img {
width: 800px!important;
height: 600px!important;
}
Change the 800 and 600 to the values you want. You can also change the size of all the images that are inside a div, for example. The code looks like this:
div#imagens img {
width: 800px!important;
height: 600px!important;
}
And your div would need the id "images" as in the code
<div id="imagens">
<img src="/imagem1.png />
<img src="/imagem2.png />
</div>