I am a beginner here so please ELI5.
I am trying to upload photos and have a set size for when they display. The photos will more than likely be larger than the settings - which makes me think this is possible. I have tried CSS and the width works, but the height does not. I have given the images their own class and have only been using CSS. This is what I have tried:
.img-list{
max-height: 175px;
max-width: 263px;
}
I have also tried
.img-list{
max-height: 100%
max-width: 100%
}
I feel like I could put something in the .php files of the theme, but I am not sure where.
With my CSS, the image will resize, but only to the width and the height will not stretch. I understand that the images will stretch and not look like the originals, but the images are going to be small in size and little detail so the stretch would not be significant (I believe). I know this has to be possible. I have been scouting the internet and see others talking about it. A lot of the other threads mention HTML. I don't know where I would put the HTML. When I put the HTML in the image itself it doesn't change anything. The CSS still takes over and does not properly work. This is the HTML I have tried.
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="image name" width="512" height="512" /></span></p>
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="img name" width="100%" height="100%" /></span></p>
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="image name" width="300" height="200" /></span></p>
All HTML codes result in the same image - CSS is active. This leads me to believe I need to put some HTML in my .php files... but where and what would it be?
All help is appreciated!
Related
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>
I am new to web dev, so please bear with me. I have to create a block with a set of images like this:
I tried using a table to do this, but the image propotions of the last columns aren't correct. I believe that coz of the height of the rows. I managed to get the center image correctly by using rowspan. I looked up numerous tutorials online but couldn't find one where the middle image is like this. I tried using li too. But failed. This is the code of the table I have
<table class="home" align="center">
<tr>
<td><img src="http://localhost/sty_partners/img/main_top_left.jpg" alt="" class="img-responsive center-block" >
</td>
<td rowspan ="2"><img src="http://localhost/sty_partners/img/main_center.jpg" alt="" class="img-responsive center-block">
<!--<div class="center" > <p> SPEND MORE <br> time doing what <br> you love</p> </div>-->
</td>
<td><img src="http://localhost/sty_partners/img/main_top_right.jpg" alt="" class="img-responsive center-block"></td>
</tr>
<tr>
<td><img src="http://localhost/sty_partners/img/main_bottom_left.jpg" alt="" class="img-responsive center-block"></td>
<td><img src="http://localhost/sty_partners/img/main_bottom_right.jpg" alt="" class="img-responsive center-block"></td>
</tr>
</table>
This is the CSS for the table:
table.home img{
width:100%; height:100%;}
Can someone please tell me what to do?
You should use the bootstrap grid system for this.
http://getbootstrap.com/css/#grid
You'll probably need to add some custom css classes to adjust the padding the way you want and to make all columns the same height. Lots of tutorials online for this (do a quick google search).
You should be able to do most of this with Bootstrap columns alone. If you're unfamiliar with the grid system or need clarification, I would go to W3C: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp.
If that alone won't work, you'll probably need to use your own CSS as well. W3C has great info on CSS as well:http://www.w3schools.com/css/default.asp. Without further details I can't tell you much else. Perhaps using the background-image property would work?
I'm by no means an expert, but I manage to get by, more or less.
I have created a "box" on my website with a specific size.
Lets just call it
<div class="newsbox" style="size, width etc.">
Inside that class, I have placed an image like this (the $this-getThemePath is CMS-specific):
<div class="image" style="position:fixed; top:15%; left:20%; padding-top: 3px; padding-left:3px; float:left;">
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png"></div>
After that, I have a loop writing out content from my database like this:
<div class="newsstyling" style="font-size: 16px;"><?php echo nl2br($news .= "\n");?></div>
Lastly, I close the -tag for my "newsbox"
In my, admittedly newbie, mind, any text being written out via the loop, should float around the image above. It doesn't. It ignores the image and writes the text underneath it.
Any tips, hints, links or guides would be deeply appreciated.
Thanks,
Thomas
that's because you're using position:fixed , positioned elements are outside the normal flow of a web page, try this instead:
<img style="float:left" /><div>my text, foo, bar, etc.....</div>
change
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png">
to
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png" style="float:right" hspace=10 vspace=10>
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;
}
I have a site where I want to change a color of an image.
I have a simple png like this:
<img src="arrow.png" alt="" id="arrow" />
I want to change the color inside in another and after to another if I want.
I have tried in this mode but doesn't work with SVG, doesn't change the color of my image
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image style=fill:#000000" xlink:href="arrow.png" />
</svg>
I need a solution in PHP or javascript or jQuery, I have seen GD library in PHP but I want to apply the change of the color to an existing element with an id like my image.
How to solve this?
As others have suggested you might as well just use an SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="arrow" fill="#000000" d="m1,65 h172 l-64,-64 h50 l82,82 -82,82 h-50 l64,-64 h-172z"/>
</svg>
You can select the element with the id and change the fill (or use style="fill:#000000").
I realize this question wasn't tagged with CSS3, but for those who find it helpful, or who are simply unaware that it's possible to use -mask-box-image in conjunction with background to "mask" images with solid colors, other images, or even [as this example shows] with gradients. Given the programatic accessibility, this can be changed on the fly with minimal scripting, if desired.
Markup
<div class="arrow"></div>
CSS
.arrow {
width: 250px;
height: 250px;
-webkit-mask-box-image: url('http://i.stack.imgur.com/1jkhG.png');
background: -webkit-gradient(linear, 38% 0%, 60% 70%, from(#dde9f0), to(#3fc5f8), color-stop(.6,#79b2ec),color-stop(.7,#2e91e5));
}
Result
Plunk
http://plnkr.co/edit/717iDTzblDQfFSkaT2N6?p=preview
Obviously, it's important to be aware of the vendor-prefix, and supported environments.
You can just cut the black parts in photoshop and make them transparent, then you can apply a background to the image like this:
<img style="background: red;" src="arrow.png">
It works on all browsers.
You can't make this on fly. For example you can generate this image by PHP script and store it for each color. You can make this in local computer and upload 100 images to server. Or you can generate it on server and use "permanent" cache. For example use link arrow.php?color=000000
Script will check in folder file with name 000000.png and if file exists then pass it to browser. Else script will generate new image with this color, save it to file 000000.png and pass it to browser.