I have a picture gallery were I'm dynamically adding the pictures with PHP. Some of the images are horizontal and some are vertical. How do I set the width/height of the images and keep the aspect ratio without knowing if the image is horizontal or vertical? Right now the images are appearing square. Ideally I would like the client to change the images without having to adjust the code.
<?php
$filelist = glob("*.JPG");
foreach ($filelist as $file) {
echo '<div class="gallerycell">';
echo '<img src="'.$file.'" width="300" height="300">';
echo '<p>'.substr($file,strpos($file,'/') + 0,-4).'</p>';
echo '</div>';
}
?>
.gallerycell {
display: inline-block;
width: 300px;
height: 300px;
text-align: center;
margin: 30px;
}
To make images fully responsive, without changing their aspect ratio, add these rules to the img element:
img {
display: block; /* removes bottom margin/whitespace */
width: 100%; /* also scales with 100vw */
max-height: 100vh; /* doesn't scale with 100% */
}
Related
I have a little issue here I cant seem to solve.
I am making a website which shows uploaded images on a page (images are uploaded by users and are not the same size). But unfortunately it does not look good at all this way because it show the entire image and if 2 don't fit next to each other on the page the second one gets pushed down to a newline and leaves a huge gap next to image 1. What I want to accomplish is something like this flickr.
How would I be able to accomplish this?
I have all the images inside a DIV name images and all the image DIVS are in the DIV inhoud
HTML and PHP:
<div id="inhoud">
<?php
include('dbc.php');
$sql = "SELECT * FROM tbl_images";
$result = $dbc->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<div class="image"><img src=<?php echo "uploads/".$row['link'] ?>></img><div class="info"><p><?php echo "By " . $row['user'] ?></p></div></div>
<?php
}
} else {
echo "0 results";
}
$dbc->close();
?>
</div>
CSS:
#inhoud{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: grey;
padding-top: 100px;
}
.image{
vertical-align: top;
display: inline-block;
}
.image img{
max-width: 100%
}
Well, if you want to do it like Flickr--which keeps a set row height and has variables image widths--then you should be able to do that with CSS.
What you need to do is give the images a set height, and then set width to auto. So, if you want each row to have a height of say 20%:
#inhound {
height:900px; /* if you want to use a percentage make sure its parent has a height */
}
.image img {
height:20%;
width:auto;
}
It's dependent on how exactly you want to display them, of course, but this is the basic principle.
I have a php file, where I had made some querys to a phpbb database, obtaining some variables (like topic_title and a image link)
I know how to show the image in php, but now I want to make them bigger on hover, and, when the image is big, show the topic title below, is this posible?
here is the code:
echo '<table cellspan="4">';
echo "<tr>\n";
while ($fila = $resultado->fetch_assoc()) {
preg_match('/\[r?img:(.*?)\](.*?)\[\/r?img:(.*?)\]/', $fila['post_text'], $fila_contenido);
$sololink = preg_replace('[^a-zA-Z0-9_+.-]','',#$fila_contenido[2]);
$fila2 = $fila["post_subject"];
echo "<th><img src=$sololink></th>";
}
echo "</tr>\n";
then I want to grow $sololink (the image) on hover, and show $fila2 (the title) below the grew image
thanks
Here's an example only using CSS.
HTML:
<div class="container">
<img class="image" src="http://lorempixel.com/400/200/" />
<div class="title">Title of this image is here</div>
</div>
CSS:
.image {
-webkit-transition: width 2s, height 2s;
transition: width 2s, height 2s;
width: 400px;
height: 200px;
}
.title {
-webkit-transition: opacity 2s;
transition: opacity 2s;
font-size: 30px;
opacity: 0;
}
.container:hover .image {
width: 600px;
height: 300px;
}
.container:hover .title {
opacity: 1;
}
Example
How to maintain aspect ratio of image thumbnail so they don't look squashed?
protected function DisplayPhoto($Sender) {
$body = $Sender->EventArguments['Discussion']->Body;
preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
if(isset($matches[2])){
$image = "src=" . $matches[2];
echo '<img class="ProfilePhotoSmall"' . $image . '>';
}else{
//do what you want
}
}
Here is the CSS.
ul.Discussions li img {
height: 60px;
width: 110px;
padding: 0 6px 0 4px;
float: right;
position: relative;
}
.Discussion.ItemContent {
padding-right: 0px;
padding-bottom: 10px;
display: inline;
}
Instead of specifying both a width and height rule in CSS, simply specify one of them (which one will depend upon the way you want the scaling). The omission of one will have the browser maintain the aspect ratio:
ul.Discussions li img {
width: 110px;
padding: 0 6px 0 4px;
float: right;
position: relative;
}
The above code will resize the image to a width of 110px, and the height will be automatically calculated by the browser.
I don't see you changing image size, but the logic will be something like this:
Let's say you have an image of 300px width and 150px height.
Find the ratio, which is 2 here. And when you give a new width to the image, example 250px.
Divide 250px/2 to find the corresponding height. New width is 250px and height is 125px.
It is just a basic logic to give you a hint
Note that you can't resize of images by CSS, it will just resize it for the user. It will load a bigger image than it needs
I'm trying to make square images from rectangular in css. They also need to be centered.
I've read a lot of questions here, but the answers, good as they might be, always use constant sizes in pixels whereas I need tem to be in percents so the theme can remain responsive.
Basically I need to change this:
into this:
but if the screen is even smaller:
The main problem here is I cannot predict the screen size. It is designed for mobile, so they can vary.
I was thinking about doing css in php (it's for wordpress so it's possible). I was thinking something like width:50% and use the width as a variable, but if I set the height to be equal to width, it will be 50% as well. Is there a way to, I don't know, convert the width to pixels or something? I'm out of ideas, please help.
The problem is, that it is just not possible to change the height relative to the width. So your problem is not the image itself (using overflow: hidden or background-size: cover will do that) but having the square size of your container with dynamic width and then the same height.
A very strange way would be to use a square image (_blank.png with 1px x 1px) and add width: 100% so the height will be the same.
with css:
div{width: 30%;}
img{width: 100%;}
and then add your actual picture as background-image with
background-size: cover;
background-position: center;
Neither performant nor beautiful, but it works.
have you tried this
img { width: 80%; }
make sure there is no height for img in your css file. Also make sure not to set something like height="500px" width="500px" in your html/php file.
also to be centered just do
img { margin: auto; }
Nice picture ;)
If you have an image you want centred—but covers—a parent element, using CSS only, then you’ll need two wrappers:
This works only for wide images. Portrait images will just centre themselves within the container.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.outer-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.inner-wrapper {
position: relative;
display: inline-block;
right: -50%;
}
.inner-wrapper img {
display: inline-block;
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="inner-wrapper">
<img src="//placehold.it/400x200" alt="" />
</div>
</div>
</body>
</html>
Just use img{max-width:100% !important; margin:0 auto !important;} and I think it will help you.
Try following css for your image. It won't break the pixels/dimensions for the image.
.imageClass img {
width: 50%;
height: auto;
}
.imageClass img {
width: auto;
height: 50%;
}
<img src="image_path" alt="" class="imageClass" />
I want to center an image in an area, without resizing... I am using HTML.
Example:
I have an image <img src='img1.png' width='64' height='64'> - the image is actually 64x64. It displays perfectly.
Now, I have another image <img src='img2.png' width='64' height='64'> however, the image is not as big as it should be, its 32x32 - what happens here is it resizes the image to 64x64 and makes it look like $%^&.
How do I make images smaller then the desired width and height centered in the 'img' area without any resizing what so ever?
What you will need is something like this:
<div class="box">
<img src="whatever size image you'd like" />
</div>
And for the styling (in an external stylesheet, natch) you'd apply:
/* Image centering */
div.box {
border: 1px black solid;
height: 64px;
width: 64px;
background: #444;
display: table-cell;
vertical-align: middle;
}
.box img {
display:block;
margin: 0px auto;
}
This works for images with dimensions <= 64x64px, and is easily modifiable to work with larger pics. The key elements here are
set dimensions on the div
display as a table-cell (allows vertical align)
vertical align (aligns on the Y-axis w/out weird hacks)
display:block on the img element
margin: auto centers the image laterally
Solution without IE-unfriendly display:table-cell:
<!DOCTYPE html>
<style>
div {
line-height:64px; /* that's the secret sauce */
text-align:center;
width:64px; height:64px;
}
img {vertical-align:middle}
</style>
<div><img …></div>
You could try putting the image inside a DIV that is 64x64 and not specifying the image dimensions. Then you could style the div so its contents are centered and any overflow is hidden.
You can dynamically get an image size using the getimagesize() php function:
<?php
$size = getimagesize('imgX.png');
$height = $size[1];
$width = $size[0];
?>
<div style="text-align: center">
<img src="imgX.png" width="<?php print($width) ?>" height="<?php print($height) ?>" />
</div>
I've had to do something similar with 36x36 images. Users were able to upload any size but the thumbnails were only to show the center 36 square pixels.
Markup:
<li><div><span></span>
<img src="_media/objects/jessica-bowman.png" alt="Jessica Bowman" /></div>
<p>Jessica Bowman</p>
</li>
The span was just there to get rounded corners on the image, it's not necessarily needed.
CSS:
ul.recent-list li div {
position: relative;
float: left;
width: 36px;
height: 36px;
overflow: hidden;
}
ul.recent-list li div span {
position: relative;
z-index: 100;
display: block;
width: 36px;
height: 36px;
background: url("../_media/icons/icon-overlay.png") top left no-repeat;
}
ul.recent-list li div img {
position: relative;
top: -36px;
z-index: 0;
float: left;
}
JavaScript:
$(window).load(function() {
$("ul.recent-list div img").each(function() {
var moveX = ($(this).width() / 2 * -1) + 18;
var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
$(this).css({'top' : moveY, 'left' : moveX});
});
});
The solution is a simple bit of CSS + HMTL
<img src="transparentpixel.gif"
width="64"
height="64"
style="
background-image:url('path/to/image.jpg');
background-repeat:no-repeat;
background-position:center center;
" />
the transparentpixel.gif is a simple 1x1px transparent gif image
An img tag with width and height attributes is saying "stretch or shrink the image to this size regardless of its actual size". use something like:
<div style="text-align:center;">
<img src="x.jpg">
</div>
and no i don't know why text-align would work, but it appears to in my experience.
Use CSS to render the image using background:
<div style="background: url(img1.png) no-repeat center center; height: 64px; width: 64px;"></div>
This will show the image in the center, without scaling it.