I am using Owl Carousel for image slider . The issue is I want all of my images in a square shape containers (Single container for each image)
I can resolve this issue with
width:100%; height:auto
But the problem occurs when I use different resolution of images. Each image can have different resolution but still I want all the images to be shown as
300x300 or 400x400 on big screens and responsive so after
I don't think forcing the size is the best way to solve this, it depends on what you want to manipulate, is it the height or width?
#editedWidth {
max-width: 100%;
width: auto;
height: 300px;
}
#editedHeight {
max-width: 100%;
width: 300px;
height: auto;
}
Link to CODEPEN
You can use background-size: cover - http://codepen.io/bluminethemes/pen/Yqobgx
if you want to be your image responsive then you should your image with square resolution because if you use rectangle type image then it will re-size according to original resolution
Related
I have some images that I want to add to my web(the image width should be as the screen width). the problem is that there are a lot of screen which means that there is a different between each one to another screen size/resolution. I tried to set the image width to 100% but in some cases it works great and in some case it distort it. Someone can please tell me the solution to this problem?
Set the img CSS to width: 100%; height: auto;
img {
width: 100%;
hegiht: auto;
}
DEMO
I'm stuck on something that should be very simple. I have a page that uses Semantic UI. On that page I have a logo image that is 200px wide by 388px high. The image is positioned absolutely, top left. It does not use any Semantic UI class. I want the image to shrink adaptively to the screen size. I have played about with min and max heights and widths, but the image will not change size at all.
The only way I got it to almost work was to replace the image with a div and set the image as a background. I got that adapting, but I couldn't maintain aspect ratio, and besides, that's not a satisfactory solution.
Here's an example of what I have;
<div class="ui inverted menu">....</div>
<img src="/img.png" class="logo">
<div class="ui page grid">.....</div>
/* css (separate file) */
.logo{
position: absolute;
top: 4px;
left: 6px;
z-index: 2;
min-height: 100px;
max-height: 388px;
width: auto;
}
This is just one of many variants I have tried and I have run out of ideas!
The best solution will be to put the image as a background-image and than set the background-size to cover.
.logo {
background-image: url(path/to/your/image.jpg);
background-size: cover;
}
This way, you'll maintain aspect ratio.
If you don't want parts of your image to be cut off, you can use background-size: contain; instead.
There is an object-fit/object-position method for your problem.
To keep aspect ratio for an img block just use:
object-fit: contain;
For placing img top left:
object-position: 0 0;
Don't forget to stretch image to 100% width and height:
width: 100%;
height: 100%;
Check out fiddle to play with it.
Please notice that this variant is not the best for cross-browser using, since there is no support for object-fit/object-position properties in IE 6-11, Edge and some Mobile Android browsers according to caniuse.
As Simon said before, I'd reccomend you using background-image for cases like this too.
So I'm building a website, which is suppose to have an image slideshow
I've set up a div for it:
<div id="slideshow">
</div>
with its corresponding CSS:
#slideshow {
position: absolute;
height: 28%;
width: 99.9%;
top: 10.5%;
margin: 0;
}
I've been trying to find a proper image size to fit the div, so that it doesn't show up differently on different screens. I've tried finding an unnecessarily big image, so that it would "scale down" to the div using height: 100% and width: 100%
But it always turns inconsistent in the two screens I test, normally too stretched. One screen has a resolution of 1336x768 and the other 1920x1080.
How can I keep an image from changing its ratio on different screens? (I think of a banner and how it's always consistent in every screen without stretching)
Typically when working with any kind of responsive design that will work across multiple screen resolutions you use the following.
img {
height: auto;
max-width: 100%;
}
This will also assure that the image keeps the correct aspect ratio.
Here are the full width banners which cause this issue. Im using a Plugin which enables you to upload a certain Image and set it up with a specific ID. So I Uploaded a jpeg with 2000px width and 600px height. Then I assigned the following CSS:
#bannerPages {
height: 296px;
margin-top: 183px;
width: 100%;
}
The banners look good on full screen, but they squish while down scaling the browser width. So I'd like to prevent the squishing effect and cutt the image while down scaling the browser size. How could I achieve this?
Looks like you have a media query that is making the width 140px !important.
Try changing the img on the media query to this
img {
width: 100%;
height: auto;
}
I played around with this for a while, but ultimately came up with two solutions depending on your needs. The first is easier to implement and more accurate to your requirements.
Remove the image from the bannerHome element and add the following code to the CSS.
.bannerHome {
background-image: url('http://www.gonpires.com/carmacks/wp-content/uploads/useful_banner_manager_banners/6-homeJV.jpg');
background-position: center center;
background-size: cover;
height: 890px
}
http://jsfiddle.net/9sqjs/2/
That method will only work in IE9+, Firefox Chrome, etc. Nice solution if you don't need IE8 support. You'll have to adjust your media queries as well. The other method requires more work and wouldn't crop the sides but it would fit and resize the image inside a 100% width container which would be cross-browser.
http://jsfiddle.net/Q64S2/1/
Have you tried making the image a background image instead?
For the .useful_banner_manager_banner classed div, you can set that large background-image so it'll essentially crop itself based on screen size.
How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/
The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)
I can only seem to get the whole image to scale when I resize the browser.
I am currently using the following code for my img class:
img.mail {
width: 100%;
height: auto;
}
Or do you mean this?
background-position: center;
background-image: url('....');
background-repeat: none;
width: 100%;
height: 100px;
It cut instead of scale like what you have posted.
NOTE: You need to have wide picture to make it work prettily
I use:
max-width: 100%;
height: auto;
They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.
e.g.
#feature {
background: url("path/to/img") center 0px no-repeat;
width: 100%;
height: 50px; // Height of image
}
example: http://jsfiddle.net/xY9qT/1/