- This topic has 10 replies, 2 voices, and was last updated 4 years, 6 months ago by David.
-
AuthorPosts
-
October 15, 2019 at 6:39 pm #1035783Hilton
Hi,
The images on my site were originally about 620px wide. I wanted them to fit the full width of the post, which is 750px and so I used the CSS below:
@media screen and (min-width: 1025px) {
.featured-image img, .post-image img {
width: 94%; }}As the height of the images is variable, I needed something that could hard crop them so that they were 400px high, and that this ratio should be kept on the archive pages as well, that in my case would be 380x200px.
Thanks
October 15, 2019 at 6:59 pm #1035797HiltonOne thing I thought and would like to hear from you is if I put the dimensions in the right proportion in Customizer (620×330 for posts image and 380×200 for archive images), regenerate thumbnails and then apply the CSS below, would it work?
.featured-image img, .post-image img {
width: 94%;October 16, 2019 at 8:01 am #1036377DavidStaffCustomer SupportHi there,
for the single post image you can try this CSS:
.featured-image img { width: 100%; max-width: 781px; height: 400px; object-fit: cover;; }
October 16, 2019 at 8:58 am #1036419HiltonHi David,
I am impressed with your solutions that always work. I created this topic beforehand and after 3 pages I could not find a solution and you already solves the problem with only one answer !! Now how can I adjust the archive images in the same way?
Thanks
October 16, 2019 at 9:30 am #1036440DavidStaffCustomer SupportYou can apply a similar method like so:
.post-image img { width: 100%; height: 200px; object-fit: cover; }
Not sure if you want to include a max-width in this case….
October 16, 2019 at 10:40 am #1036496HiltonHi David,
We had to make some adjustments to fit the image on different screen sizes. What do you think about them?
@media screen and (min-width: 768px) {
.post-image img {
width: 100%;
max-width: 380px;
height: 200px;
object-fit: cover;
}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.post-image img {
width: 100%;
height: 300px;
object-fit: cover;
}
}
@media screen and (max-width: 480px) {
.post-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
}
/*——–*/
@media screen and (min-width: 768px) {
.featured-image img {
width: 100%;
max-width: 781px;
height: 400px;
object-fit: cover;;
}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.featured-image img {
width: 100%;
height: 320px;
object-fit: cover;;
}
}
@media screen and (max-width: 480px) {
.featured-image img {
width: 100%;
height: 250px;
object-fit: cover;;
}
}October 16, 2019 at 11:01 am #1036522DavidStaffCustomer SupportLooks good to me.
You can reduce your CSS by applying any common properties to a CSS selector outside of a media query for example add this to apply everywhere ( replaces desktop ):.post-image img { width: 100%; max-width: 380px; height: 200px; object-fit: cover; }
Then in your media query just overwrite the change eg.
@media screen and (min-width: 481px) and (max-width: 767px) { .post-image img { height: 300px; } }
October 16, 2019 at 11:07 am #1036528HiltonYes, you are right. This would be used instead:
.post-image img {
width: 100%;
max-width: 380px;
height: 200px;
object-fit: cover;
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.post-image img {
height: 300px;
}
}
@media screen and (max-width: 480px) {
.post-image img {
height: 200px;
}
}.featured-image img {
width: 100%;
max-width: 781px;
height: 400px;
object-fit: cover;
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.featured-image img {
height: 320px;
}
}
@media screen and (max-width: 480px) {
.featured-image img {
height: 250px;
}
}October 16, 2019 at 11:10 am #1036529DavidStaffCustomer SupportLooks good ๐
October 16, 2019 at 11:21 am #1036538HiltonThanks David.
Just to leave registered this was the final CSS to be able to display full-width on mobile (used max-width in all @media screen)
.post-image img {
width: 100%;
max-width: 380px;
height: 200px;
object-fit: cover;
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.post-image img {
height: 300px;
max-width: 750px;
}
}
@media screen and (max-width: 480px) {
.post-image img {
height: 200px;
max-width: 500px;
}
}.featured-image img {
width: 100%;
max-width: 781px;
height: 400px;
object-fit: cover;
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.featured-image img {
height: 320px;
max-width: 790px;
}
}
@media screen and (max-width: 480px) {
.featured-image img {
height: 250px;
max-width: 500px;
}
}October 16, 2019 at 1:09 pm #1036636DavidStaffCustomer SupportAwesome – glad its working for you ๐
-
AuthorPosts
- You must be logged in to reply to this topic.