How can I take an image that has been entered into Wordpress and fit it into a specific sized div without losing it's aspect ratio?
The div is 104px x 104px but the user could literally enter an image into Wordpress at any size.
I'm using the following to insert the image from Wordpress into the page:
<img border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />
I haven't set a width or height.
This has nothing to do with WordPress, PHP, or any other server side program, or programming language.
<img style="max-width: 100%;" border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />
As long as you set max-width and no other widths or heights the image will be no larger than the containing element and won't lose aspect ratio.
set only one parameter i.e. height or width. You will never loose the aspect ratio of that image. You can set the width of the container and make image width to 100% or you can directly add width to your image, but don't set both parameters to get the correct aspect ratio.
Use http://phpthumb.sourceforge.net/
here you have a lot of demons how to use it
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php
Set the images CSS max-width and max-height values to the width and height values of the surrounding div.
<div style="width: 104px; height: 104px;">
<img style="max-width: 104px; max-height: 104px;" src="myimage.jpg">
</div>
I'm not familiar with Wordpress, but wherever you can change these CSS values, do it and it will fit the div.
Related
Not exactly an issue since I can easily achieve the desired effects using a margin, but just curious: why does specifying the padding left or right for a div also create a space at the bottom of the div?
<div class="col-md-12 row" style="margin:0px;padding:0px">
<div class="col-md-4" style="padding-bottom: 0px;padding-left:0px">
<img src="/images/1.jpg">
</div>
<div class="col-md-4" style="padding-bottom: 0px;padding-left:10px">
<img src="/images/2.jpg">
</div>
<div class="col-md-4" style="padding-bottom: 0px;padding-right:0px">
<img src="/images/3.jpg">
</div>
</div>
I expected this code to line up the three images perfectly. But as you can see in the picture: the middle image, having padding-left:10px is also creating some padding at the bottom despite it specifying 0px. I resolved the issue by using margin in the img tag and avoiding padding, but it made me curious: why would padding-left create space at the bottom?
why would padding-left create space at the bottom?
Probably because the image is set to scale with the available width - which just got reduced due to your additional sideways padding. And so, since it resizes proportionally, keeping its aspect ratio, the height also gets reduced.
You have two options
Add a fixed width and height for the pictures and use object-fit: cover like this:
<img src="/images/3.jpg" width="200" height="80" style="object-fit: cover">
Do the same thing but with the images as a background and use background-size:cover
Keep in mind that this will crop your picture to fit the size.
I have the following code for displaying an image. It works but it doesn't change the size of the image if I change the height and width values in here.
<img src="<?php echo trim($user_data['profilepicture'])?>" height='10' width='10'>
Can somebody help me with this.
It's width and height, not weight.
For some reason, on this page, the images are not positioned neatly inside the rectangles; instead they are shifted slightly to the right in IE, Chrome, and Firefox.
<img height="350" width="150" class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(); ?>" />
I set the image to have a height of 350 and width to be 150 for uniformity.
The "rectangle" itself is
<div class="item_image">
<!--IMG HERE--></div>
I am using the WP e-Commerce Grid View Lite plugin with WP e-Commerce (another Wordpress plugin).
The problem is in the index file (http://yadress.com/make-it-yourself/) on the line 116. On the anchor selector.
.product_grid_display .item_image a {
width: 350px
}
Removing the width property from that anchor solves the issue.
You have 3 options
Distortion the image to fit the frame (div), so bad
.product_grid_display .item_image a {
width: 350px;
height :150px;
}
Create a fixed-size frames , and overfollow attributes : hidden
.item_image{width:px;height:150px;overfollow:hidden;}.item_image img{widht:100%}
use timthumb to crop a picture fit the frame.(recommend, this is the best way, also good for page speed)
This website uses timthumb, you can refer to this site
I want to display image in fixed size without changing the aspect ratio.
I wanna display images in this size 200px * 200px, while keeping the original aspect ratio. All the images here are larger than 200px * 200px.
I want to crop the image from center and set width and height as 200px, without changing the aspect ratio, which means we only want to display some part of the image.
Could anyone tell me how to realize it? I've tried CSS using max-width and max-height but seems CSS couldn't help.
I use PHP as server-side language. I heard someone suggest GD. Any ideas?
This should solve the problem
HTML
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
</div>
CSS
div {
width:200px;
height:200px;
overflow:hidden;
position: relative;
}
div > img {
width:300px;
height:auto;
position:absolute;
top:-100px;
left:-100px;
}
Here is a DEMO
I'm trying to get a layout similar to Pinterst. So far I have images that are randomly generated in php between like 125px and 400px.
This did not result in a Pinterest-like effect, where the right aspect-ratios seem to be dynamic. Does anyone know how Pinterest dynamically generates the height of their images?
<div class="pin_image">
<a href="<?php the_permalink(); ?>"><img width="191" height="auto" class="<?php echo $img_class; ?>"
src="<?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?>" /></a>
</div>
They base the image width on the column width. So for example, if their columns are 200px wide, and the original image is 600px height and 400px width, they would scale the image by half to get it to fit the column width. So 600px * 0.5 = 300px height, and 400px * 0.5 = 200px width. By multiplying both dimensions by the same percent, you maintain the aspect ratio.
You need something like Isotope or Masonry
It doesn't change image height but it reorders the layout in a pleasant way.
When you resize the images, you need to do this based on the WIDTH of the image. As what you want is a fix with and a popotionate height.
For example if you have an image which is 1000 by 2000 and if your column is 100px, you need to resize it to 100 by 200. (i.e. calculate the ratio for width and apply the same to height)
You just need to set the width on the tag to that of the width of the column. The aspect ratio of the image will be kept and the height will be set accordingly.