I have this event carousel on my website and the chosen image is a rectangle. I want it to be a square, but I don't know how. I can't find anything that will help me on google regarding this question I have.
My website is https://musikhuset.nu (Swedish)
I want it to be a square on every picture on the event carousel if that was unclear, not just one.
I have tried writing:
.mec-event-image{
width:287px;
height: 287px;
}
but it doesn't work.
img {
width: 287px;
height: 287px;
object-fit: cover;
}
As #Johannes pointed out: You need to add units to CSS-size definitions. For your case, you want to add px (pixels) to your numbers.
Generally you can also use other units, most common are em, %, vw & vh. For a more complete list, see CSS Units by W3Schools.
Related
I'm trying to make all product images the same height. I feel like I should just be able to add the following to ".product-image":
height: 300px;
width: auto;
position: absolute;
but that doesn't work here.
Here is a link to the page with the issue:
http://www.hothothot.com/shop/product-category/enter-at-your-own-risk-10/
How can I make these images the same size? again, I think that they should be governed by .product-images, but the only thing that seems to work is when I change the more generic "img" for media=All which then messes up other images on the site.
Please help. Thanks!
Remove height:auto; in your code and if you want a specific height on it then use height:50px; or whatever you would like.
img{
border-style:none;
vertical-align:top;
max-width:100%;
height:auto; // <--- Remove that
}
Online tools like picresize are great help in your case http://www.picresize.com/. You can resize the images so even with height:auto; it would work perfectly.
You can reference them via
.product-images img {
// css here
}
There appears to be no class called product-image, so this references any image within the a tag with the class product-images.
However, increasing the height when all the images are different sizes and the outer tag has a max-width may well lead to some images being stretched and looking odd.
Stretching small images can also make them quite blocky.
If the idea is for a tidy alignment, you are probably better setting a height on the .product-images tag and making the images vertically align within it.
(Also, the simplest way to make them the same size may well be to edit the images and upload them the same size)
The product-image class is on the link that surrounds the image.
The image itself has two classes: attachment-shop_catalog and wp-post-image.
So, you could try something like this:
.attachment-shop_catalog .wp-post-image {
height:300px;
}
The other issue is that the img has width and height specified in the html.
To make sure the image scales properly you should set the width to auto.
Try something like this:
.attachment-shop_catalog .wp-post-image {
height:300px !important;
width:auto !important;
}
I added !important so that it will override the hard coded html dimensions.
Hope this helps
Definitely having one of those WTF moments right now.
I'm trying to implement a design where the main element goes off canvas when you carry on scrolling up. Responsively, of course.
I figured it would be pretty easy to do.
main{
padding-bottom: 100%;
}
Which, I figured would create space underneath the element equal to 100% of it's height. It didn't. Then, after some element inspecting, and some reading up on the spec, I found this horror:
"The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well."
-W3C
This blew my mind. I found this question asking why and although I'm not satisfied with the answer over there, I'm not going to duplicate the question.
What I want to know is how can I get around this bizarreness?
From one of the other comments on that question, I investigated trying to change the flow of the element in question to vertical.
"According to dev.w3.org/csswg/css3-box/#the-margin-properties it states 'Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).' So it goes both ways." – Adam Sweeney
So I tried adding writing-mode: vertical-rl; but that doesn't seem to change anything. Not really sure why because I figured it might at least rotate my text or something but no change.
So yeah, I'm starting to think this might not be possible in CSS at all but that, to me, is just mental.
Thanks for any suggestions.
.main {
position: relative;
bottom: 100%;
}
Just a thought.
Ok I've solved my problem with a pseudo element, so I'll post how I did it here in case anyone has the exact same problem but I'll leave the broader issue of getting percentage based padding & margins to work as expected unsolved as yet.
I wanted to create a space under the main element that was equal to the height of the main element.
So, I did this:
<div id="wrapper">
<main>Content</main>
</div>
#wrapper{
height: 100%;
width: 100%;
}
main:after{
height: 100%;
width: 100%;
position:absolute;
}
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
I've asked this question before : CSS Background Image
Its not as such a repeated question though. In that I've now got a set image size of 1280 x 1024. But the problem I've got is that on larger screens the background etc dissapears. In the previous question it was suggested to try keep the elements fixed.
Does anyone have a solution for me on how to get this design to work on larger / smaller screen sizes? I've considered making the image 12 times and try find some JavaScript to get the browser size then start the background image based on that?
I'm aware of other issues on the page. I just want to get the background sorted first.
An example of my page is HERE
Thanks in advance.
Remove the background image from body and add it in html: <img src="http://www.stuartblackett.com/picturebook/images/bg1.jpg" id="background" />
Then in your css add the following:
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Demo: http://jsfiddle.net/XW9Pz/
Will it work to set
background-attachment:fixed;
?
See: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment
I have single image where all mine site logos/images are clubbed,so how i can fetch required image from main image like logos,arrows etc
I think you're referring to a sprite sheet. Take a look at this link. It helped me out a lot. If you need any help with it after that let me know!
Sound's like your using sprites. There's numerous articles out there dealing with this technique:
http://css-tricks.com/css-sprites/
http://www.alistapart.com/articles/sprites
http://www.peachpit.com/articles/article.aspx?p=447210
Here's an example:
#logo {
background: url(main_image.png);
background-position: 50px -100px;
}
The background-position property is the most important part. You'll want to find the exact pixel locations of each image (any image editor) before you start adding it to your CSS.