I want to resize image with css , But I couldnt.How can we do it?
<img class="img" style="width:200px;height:200px" src="<?php echo $list[$i]->image; ?>" alt="<?php echo $list[$i]->title ?>" title="<?php echo $list[$i]->title ?>" />
So I want to do width 200 and height 200 px , not image size.
Thanks.
You can use it as a background and use the following properties:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
https://jsfiddle.net/alexndreazevedo/upn7jwfs/
If you just want the image to be at max 200px width or high, you could do something like this:
<img class="img" style="max-width:200px;max-height:200px" src="<?php echo $list[$i]->image; ?>" alt="<?php echo $list[$i]->title ?>" title="<?php echo $list[$i]->title ?>" />
I changed style="width:200px;height:200px" to style="max-width:200px;max-height:200px"
If the image is not square the largest dimension will go to 200px and the other will scale to a smaller size.
Let me know if this doesn't make sense.
Related
I am trying to show image. I have an image named 5.png. And my database value $bnr_value also returns 5 correctly. but image does not show. How can I fix it?
<img src="new_img/header/career/"<?php echo $bnr_value.'png'; ?> alt="" class="image" style="max-width: 100%; ">
Try this:
<img src="new_img/header/career/<?php echo $bnr_value.'.png'; ?>" alt="" class="image" style="max-width: 100%; ">
//try this ..
<img src="new_img/header/career/<?php echo $bnr_value.'.png'; ?>" alt="" class="image" style="max-width: 100%; ">
=> "new_img/header/career/" is a not a full path ..
Example :- "new_img/header/career/<?php echo $bnr_value.'.png'; ?>" // set like this .
I currently have an info image in a table.
When I hover over the icon it displays the artist description in the tool tip because i have it set up to do so.
<img src='images/info.png' width="20" height="20" title="<?php echo $artist['description']; ?>">
This is my CSS
img[title="<?php echo $artist['description']; ?>"]{
border-radius:50%;
background-color: red;}
It doesnt work. Is there anything I can do?
I am working on a WordPress website locally, where I am currently trying to dynamically call a Custom Header. I am using the following code:
<img src="<?php header_image(); ?>" height="20%<?php echo get_custom_header()->height; ?>" width="20%<?php echo get_custom_header()->width; ?>" alt="header-image" />
The above code, outputs the following line to the Browser:
<img src="http://localhost/wordpress-folder/wp-content/uploads/2017/10/image.jpg" height="20%3484" width="20%2439" alt="header-image" />
Though the above code successfully calls the Custom Header, it does fail W3C Validation. The error message is as follows:
Bad value 20%3484 for attribute height on element img: Expected a
digit but saw % instead.
The only way I can seem to remove this error, is by removing the % (px also produces the error) and only leave in the number.
Is there a way I could continue using Pixels/Percentage other than reorganising my code, so that I could implement some Inline/External Style Sheets?
You are using HTML height and width attributes. When you pass values to them you cannot pass the metric (e.g.: %, px etc) to it.
You will have to change your line to:
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="header-image" />
Hope this helps. :)
This should throw an error as it's not in a correct format. It should be either in % format or px format. 20%3484 is an incorrect format.
If you want to give fixed height, you can use this:
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="header-image" />
or if you want to use %, then use this:
<img src="<?php header_image(); ?>" height="20%" width="20%" alt="header-image" />
But you can only use one of them.
Let me know if it helps.
As <img src="path"> src attribute don't take the path from another driver,
so in php, image get converted to base_64 then image codes are given as path in image tag, it's working well but not in internet explorer? i am posting code here
$img = "D://images/1s.jpg";
$image = file_get_contents($img);
$image_codes = base64_encode($image);
$img1="D://images/1.jpg";
$image1 = file_get_contents($img1);
$image_codes1 = base64_encode($image1);
?>
<div style="float:left; width:900px; display:block;">
<h2>Back to pirobox homepage demo1</h2>
<div class="demo"><a href="data:image/jpg;charset=utf-8;base64,<?php echo $image_codes; ?>" class="pirobox_gall" title="Spain 2009" >
<img src="data:image/jpg;charset=utf-8;base64,<?php echo $image_codes; ?>" width="100" height="100" /></a></div>
</div>
<div style="float:left; width:90%; display:block; margin:5px 0 0 5px;">
</div>
</body>
i have a set of images that i want to show where they are saved into my database as linked, where each images has its thumbs, now i have used limit inquery to show a small number of images where the user needs to go next to show the other, my question is that how can i arrange those images where 4 images in a row and 3 columns
HTML:
<div id="image_container">
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
...
</div>
CSS:
#image_container { width:440px; overflow:hidden; }
#image_container img { width:100px; margin:5px; float:left; display:inline; }
You may need to adjust the sizes; this is the general concept though.
If the images all have the same width then make the container only wide enough for 4 images and float the images left
Otherwise loop through the images and use the modulus operator to test for which image in the row you are on. If you are on an image that should be the first in the row you can clear the floats on that image.