I'm working on a Gallery Web page and I have different size images stored in local server. What I want is to make my gallery look like this. Simply saying I want to keep Division size same for all image sizes. Also image should cover whole area.
What I tried
I suppose to use PHP to get image locations and do this task. So I'll paste PHP file.
<?php
$itemNum =$_POST["itemNum"] ;
$folderName = $_POST["folderName"];
echo '<div class="col-md-4 mix category-a" style="margin:10px;height:300px;width:400px">
<div class="single-portfolio" style="height:300px;width:400px;overflow: hidden;">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>';
die();
?>?>
My Problem
This code doesn't do what I want. I tried every way I know to make this possible. Can someone help me to get what I want? Thanks.
EDIT:
This is what I got. Can see that size changes according to image size
Set max-height and max-width of div and also fix height of image :
<div class="single-portfolio" style="max-height:300px;max-width:400px;overflow: hidden;">
<img style="height:300px;width:400px;" class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" />
All you have to do is playing with css and its so easy to apply. You have fixed height of image and that is 400px.
So css for the div will be
.category-a {
height: 400px;
}
.img-responsive {
display: block;
max-width: 90%;
max-height: 400px;
margin: 0 auto;
}
And your HTML will be like this. Please don't apply inline css as its always bad practice to use like this. instead use class.
<div class="col-md-4 mix category-a">
<div class="single-portfolio">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>
Related
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
this is the code to my image, the problem is the image is too big for the page and cuts out. I want a horizontal scrollbar. I want to know what the code is to make a horizontal scrollbar so I can see the rest of the image. I do not want to resize the image, just to be able to scroll horizontally. I know a weird idea. any help is appreciated.
A way you could probably go about doing this would be to place the image in a div with given dimensions and then setting the overflow property on the div to scroll. It would look something like this:
HTML:
<div class="img-container">
<img src="the fake.png" width="3268" height="538" class="table" alt=""/>
</div>
CSS:
.img-container{
width: 500px; /*width of the container the image is in, your choice*/
height: auto; /*means the height of the container is the same as the image so you are not scrolling vertically*/
overflow-x: scroll; /*this is the important line that tells the browser to scroll content outside the div*/
}
Hope this helps. Also, I recommend setting the height and width of the image using CSS rather than HTML
I'm working on a small project, and have one little problem that I don't know how to resolve myself. I have an image gallery with many images, but I want the active image to be centered, without changing the resolution or width/height ratio. Link for the issue here. Login is user / password. I tried to manipulate with this CSS:
.img {
margin-left: 200px;
}
However, it seems to ruin the bottom slider. What should I do to center the main image without changing the image ratio? This example image shows what I want to do.
Try this
.imgs {
margin-left: auto;
margin-right auto;
}
or you could do this
<div class="imgs" align="center">
<img src="https://source.unsplash.com/random/200x200" />
</div>
Try adding:
.flex-active-slide {
text-align: center;
}
I am working on a website and we have a press section. The page automatically loads the articles from the database, but I'm having a cosmetic issue.
Basically, the cards the articles sit in (aside from the featured article) all size differently based on the image.
What I'm looking to do is keep each card the same size. My thought is to have it show the same size image no matter the actual size of the image uploaded I hope that makes sense.
Is it possible to do this? Can anyone lead/guide me to how it can be done?
Below is an image of what it currently looks like. What I want to do is make every card the same size. So, sort of, create a mask that displays a specific size:
Two examples based on my comment, obviously, I'm unsure of your actually code
One way:
<style>
.card-image {
width: 200px;
height: 100px
}
</style>
<div class="card">
<img src="path/to/image.jpg" class="card-image" alt="Alt Text"/>
</div>
Another:
<style>
.card-image {
width: 200px;
height: 100px
background-image:url("path/to/image.jpg");
background-size:cover;
}
</style>
<div class="card">
<div class="card-image"></div>
</div>
I need to crop wordpress thumbnail like in the image below, i.e., crop piece of image from left top corner, without scaling of image.
Can I do this without plugins?
Here's an example of how you'd crop to the top-left of a much larger <img> using a parent container.
.crop {
width: 200px;
height: 200px;
overflow: hidden;
}
<div class="crop">
<img src="http://i.imgur.com/pRSJBDI.jpg" />
</div>
I am adding images into a page that are all different aspect ratios (some wide, some tall etc).
what is the best way to get all the images to display the more or less the same size but not be squashed/stretched?
I have tried
<img src='admin/userpics/$prodID.jpg' height='50%'>
This doesn't seem to make images the same?
I'd use CSS.
img {
max-height: 200px;
max-width: 200px;
}
simply set the width or height to a fixed value, and the other value to auto
<img src='admin/userpics/$prodID.jpg' style='width:100px;height:auto;'>
or
<img src='admin/userpics/$prodID.jpg' style='height:100px;width:auto;'>
what ever you prefer, the aspect ratio with be always correct
If you don't like img tags (as me), you could use this (if you won't target <= IE8 as Brad pointed out):
div.image {
background-size:cover;
background-position:center;
display:block;
width:30%;
height:30%;
}
<div class="image" style="background-image:url(admin/userpics/$prodID.jpg)"></div>
Proof: http://jsbin.com/ekogaz/1/edit See how the image always stays in center, but still is cropped. You can add as many of these as possible. Also, you can use % (or like 100px). Try to resize the window and you'll see that it works then too.
<img src='admin/userpics/$prodID.jpg' style='height: 200px; width: auto;'>
Use values in pixels, instead of a percentage. Like this:
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
You already got many useful answers for displaying resized images with html/css, but i would recommend you create thumbnails and use them instead. That way you will avoid loading the full resolution images even if you just need small resolution thumbs, which is important especially if the images are in high resolution or you are building some kind of gallery. Also you will have control over the quality of downsampling done on your image, which is much better then some browsers do. Since you use PHP check out this library for example: phpThumb
You can define the maximum width and height you want to use, and resize image keeping the aspect ratio.
http://jsfiddle.net/7TDCA/
HTML:
<div class="img-wrapper">
<img src="http://i.imgur.com/Himba.png" alt="" title="" />
</div>
<div class="img-wrapper">
<img src="http://cdn.fotocommunity.com/Natur/Tiere/Pfau-Hochformat-a18613762.jpg" alt="" title="" />
</div>
CSS:
.img-wrapper {
margin: 50px auto;
width: 50%;
height: 250px;
overflow: hidden;
}
.img-wrapper img {
width: 100%;
height: auto;
}