I have the following problem with my wordpress site. In my blog section, where a list of all blogposts is shown, my featured images are of bad quality because of the responsive images option Wordpress implements. This is what my code looks like:
<div class="post-thumb"><a href="http://www.example.com/mypost">
<img width="300" height="75" src="http://www.example.com/wp-content/uploads/2017/02/img-300x75.jpeg" class="alignleft wp-post-image" alt="" srcset="http://www.example.com/wp-content/uploads/2017/02/img-300x75.jpeg 300w, http://www.example.com/wp-content/uploads/2017/02/img-768x192.jpeg 768w, http://www.example.com/wp-content/uploads/2017/02/img-1024x256.jpeg 1024w, http://www.example.com/wp-content/uploads/2017/02/img.jpeg 1400w" sizes="(max-width: 300px) 100vw, 300px">
</a></div>
If I change the 'sizes' element in my console and the maximum width to a much higher number than 300px (e.g. 3000px), my image shows in the quality it is supposed to be. But now my site, which is full width, only scales an image of 300px. I currently do not know where to change this element in my theme.
Thanks in advance,
Tom
Hello try display images in full size in your theme:
<?php the_post_thumbnail('full'); ?>
My template always displays images in full resolution.
Or you can try change post thubnail size from Admin Panel and refresh images with plugin again (i dont remember plugin name now).
Style (or min-width: 100%; max-width: 100%;):
<style type="text/css">
.post-thumb img{
padding: 5px; float: left; width: 100%; height: auto; overflow: hidden; box-sizing: border-box;
}
</style>
Related
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;
}
On my front page I want the post thumbnail to be the full width of the page. But I only want it to be the full width of the page up until the image width it was uploaded at. So when the page gets bigger and bigger I want the image to stop being 100% once it gets to its actual image size and then just stay that size. Right now I have figured out how to make the post thumbnail full width, however as the page gets bigger the image just stretches to fit 100%. How could I fix this?
<?php the_post_thumbnail('thumbnail', array('class' => 'large-front-thumbnail')); ?>
.large-front-thumbnail {
position: relative;
width: 100%;
height: auto;
}
You need to make 2 changes.
Right now you're setting the image width to 100%. When you set width to 100%, no matter what size the image was uploaded at, it's going to stretch to the width of the container. You need to set width to auto.
You then want to set a max-width of 100%. Those 2 properties combined will mean your image will scale responsively yet never exceed the original upload size.
.large-front-thumbnail {
height: auto;
max-width: 100%;
position: relative;
width: auto;
}
As long as you haven't altered any of your WordPress defaults, the image size will always be 150px by 150px. How do you know? Because you are passing the 'thumbnail' argument into the_post_thumbnail.
Therefore, as #pol said, setting a max-width rule of 150px will work.
See more here about the behavior of the_post_thumbnail.
The following CSS should be what you require:
.large-front-thumbnail {
position: relative;
width: auto;
height: auto;
max-width: 100%;
}
Actually you just need use "max-height" & "max-width", preferable add div container outside constraint outer image size.
<div style="width: 100%;">
<img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" alt="anything" style="position: absolute; max-height: 100%; max-width: 100%;"/>
</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>
My prettyPhoto images get distorted when I save them as an .HTML File.
When I save the page as .html or .htm the images become distorted, when I save the page as .php the PrettyPhoto images are fine.
Here's what happens.. http://Handyman-Services.NYC/NYC-Handyman-Services.php
the images are fine.
When save as .html.. http://Handyman-Services.NYC/NYC-Handyman-Services.html
the images are distorted...?
What am I missing here...please help. Thanks JB
Solution: Remove the height attribute from your images.
The distortion is due to the explicitly defined width and height of the images. The images have CSS styling overriding the width to scale down to 100% of the parent container, but the image height is unchanged so it looks distorted (because the aspect ratio of the image is not maintained).
The explicit width and height attributes are missing from the images in the PHP file so that is why it is not distorted.
you have width and height set on the tags when you save it as .html. Possibly because you're using an editor of some sort. Remove the width and height properties and it works fine.
You have this in the HTML file:
<li class="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
<img height="666" width="1920" draggable="false" src="assets/extra-images/NY_Handyman_Services_Voted_Number_One_Handyman_Service_of_2015.jpg">
</li>
You should have this:
<li class="" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
<img draggable="false" src="assets/extra-images/NY_Handyman_Services_Voted_Number_One_Handyman_Service_of_2015.png">
</li>
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;
}