I have a Wordpress site with some galleries with quadrangular photos but I want them to be rectangular to users see the entire photo. I changed the values (height in particular) but when I do that the image stretches and I can't find the way to resolve that problem. I'm still a little newbie in CSS so anyone can help me? It's seems to be a easy thing but unfortunately I can't do.
Here is the gallery: http://cp58.webserver.pt/~httpfash/kids/
All the images have the same size.
Some of the code:
bootstrap-light.min.css
.img-responsive {display:block;max-width:100%;height:242px}
.models li a img {
width:100%;
I used firebug to find that.
.models li a img {
width: 100%;
height: auto !important;
}
Always use height auto for responsive images
img {
width: 100%;
height: auto !important;
}
Related
I have created an html document. Inside this I've imported an image under a paragraph. But whenever I change the resize my browser. The image disappears by moving below the page.
The image is given inside a card.
.Card{
border:none;
font-family: 'NCS Radhiumz';
border-radius: 15px;
background-color: #000000;
width:90%;
height: 85%;
margin-left: 80px;
padding-left: 5%;
padding-right: 5%;
I just want everything on the page to resize without disappearing from the page. I'm very new to coding.
Anybody know how to fix it?
What you're most likely missing is some styling on your image element. Try this in your css file:
img {
width: 100%;
object-fit: contain;
}
You can experiment with different ways to fit the image in your component. Check out these docs for some options.
you're asking for responsive web design. You can achieve that by implementing CSS Media Query.
Learning source:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
If you want your image to be in one place and don't move you can do that with position style in css like so:
.element {
position: fixed;
}
or
.element {
position: absolute;
}
But image moving below is normal since the browser can't fit the image besides the text.
If you want your image to behave differently you can do that by using #media query and manually write how the app should change based on screen width/height. But generally the best way to do so is using flex-box or grid, since the browser automatically does object moving for you.
I am trying to customize the Lightbox/zoom feature in Cargo Collective, believe it uses Photoswiper.
As of now it fills the whole screen and would like to be able to control the size so it does not cover the top and bottom nav bars. Can I add some padding or block to the PSWP? The PSWP is not showing up in the general CSS editor. SO it seems as though I would need to add some of my own code.
The goal is trim off the top and bottom and also control the size of image when zoomed.
Thank you in advance.
I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:
.pswp img {
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
}
I also styled the background with the following. You could also add margin top and bottom here if you want to add a gap in the PhotoSwipe background.
.pswp__bg {
background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
background-color: #fff !important;
}
Cheers!
An update - this solution looked great on my screen but too small on a big screen. Styling with percentages rather than a single px size is a better solution here. Hence:
.pswp img {
object-fit: contain !important;
max-height: 70% !important;
max-width: auto !important;
margin-top: 5%;
margin-bottom: auto;
}
When I load my page, images are displaying correctly, and when I scroll and come back to the images, they appear like this only on mobile :
enter image description here
Use this CSS in which you want media query.
.your_class or img {
width: 100%;
max-width: 100%;
height: auto;
}
I have issue on my Woocommerce site. Main image on some products are not alligned properly making mess with title. See problem bellow:
I tryed old method to set images width and height , and after that regenerate thumbnails, but seems do not work in Woocommerce 3.3.X. Can someone to tell me how to fix this, or give me some instructions how to?
This is CSS i think that control that part..
.woocommerce ul.products li.product a img {
width: 100%;
height: auto;
display: block;
margin: 0 0 1em;
box-shadow: none
}
You are setting different heights which is causing some items to align incorrectly.
.product_cat-tops .et_shop_image {
height: 360px !important; }
.product_cat-jurken .et_shop_image {
height: 320px; }
You have lots of different heights in your CSS set: https://jsfiddle.net/Lwmjseaj/
If you set both of these to the same height, the captions will line up nicely :-)
I'm pretty new to coding so it may be that I do not understand what I'm doing. I've tried every bit of code advice given on this website that seems to pertain to my situation and I cannot get results!
My carousel sliders are outside my images and I need them in/on my images. I want them the size they currently are so viewers do not have to scroll up and down to view my entire picture. You can view my predicament at http://mirandarodgers.com/lenoxhouse.html
Like I said, I've tried everything under the sun. Currently my code just says:
.carousel .item{
min-height: 525px; /* Prevent carousel from being distorted if for some
reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
position: absolute;
min-width: 100%;
height: 525px;
max-width: none;
}
I'm ashamed of how much of a hack this is, but it might help you out:
.right {
right: calc(100vw / 2 - 374px);
}
.left {
left: calc(100vw / 2 - 374px);
}
So to solve this I gave both the images and the .carousel a fixed max-height (I used 400px).
.carousel .item img,
.carousel {
max-height: 400px;
}
You vertical images will scale to a height of this value.
You can play around with different max-height values and even have the height depend upon the screen size using CSS Media Queries.
Whats happening is that the slider images are aligned to the sides of the actual carousel itself, if you want to restrict the size of the carousel set a max-width on it. This is because the size of your images cannot fit the width/height of the carousel and there isn't any code for resizing the img or the carousel. If you work on the resizing of your elements it should solve the problems you are having and try to find better images that are roughly the same dimensions or the carousel will expand/shrink unexpectedly if it isn't handled correctly.
I added the following to .carousel and it looked much better on the site.
.carousel {
max-width: 70%;
position: relative;
margin: auto;
}
Also i would add an img tag with
img {
max-width:100%
}
And this
.carousel .item {
max-height: 525px;
}