I'm developping an ionic application, and i want to display some images in some cards, the problem is that my images have not the some size, and i want them to look the some.
The idea is to use à css class that will solve the problem ( at least in the width )
.full-width-image {
width: 100%
}
this class will solve the problem of size and all the images will have the some width. how ever i dont know how to make a fixed height for them all. if i add to my css class a fixed height like:
.full-width-image {
width: 100%;
height: 60px;
}
some pictures will look ugly:
how it looks like
what i want is to hide the extra part of the image.
If you have a set width and height you can use object-fit: cover; for the image to fill the entire space without losing its aspect ratio.
I would recommend you to use a flex wrapper around an image.
.wrapper {
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 2px gray;
width: 100px;
height: 100px;
overflow: hidden;
margin: 1em;
}
.wrapper img {
border: 1px solid black;
max-width: 100%;
max-height: 100%;
}
.example {
display: flex;
}
<div class="example">
<div class="wrapper">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
<div class="wrapper">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</div>
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</div>
<div>
Using this technique you get a kind of smart image - it scales itself to fit your wrapper, its fixed size, but without distortion. Look, there are black borders around the images, so you can see that both an image with width > height and an image with a tree, where height > width, fit well the wrapper, restricting the width and the height correspondingly.
Also you can you inline-flex instead of flex in the wrapper class.
Related
I need to fit an image into a fixed width/height div (say 80%/80%), but I also need the image to be wrapped in another div so that I can place an absolutely positioned element on top of the image (using that wrapper div as the anchor). I have accomplished the first point by just setting the max-height and max-width of the image to 100% so that it will always take up 100% of one dimension and won't exceed the other while maintaining aspect ratio, but I am unable to figure out a way to wrap the image in a div such that there is no extra space in the wrapper. I was under the impression that using display: inline or display: inline-block on the .wrapper div should shrink to the size of it's content (the image in my case), but that does not appear to be the case. When I replace the image with a test div with a defined width and height, the wrapper works as expected, i.e. there is no excess yellow background from the wrapper, it is exactly the same size as the div. How can I achieve the same behavior with the image? I've tried using all sorts of combinations of different display modes (flexbox/inline/block) and various min/max heights/widths but none have worked.
I've put an example of what my HTML looks like now, and what I would like it to look like if I could get this to work below. The .window element is a stand in for whatever the parent of the container is. The .container element is where I'd like to fit the image. In the example with the image, the inline wrapper is still larger than the image (which can be seen by the yellow overflowing on the sides). In the example after that with just a fixed size div (colored green), the wrapped properly shrinks to exactly the size of the div. Can this be accomplished with just css without knowing anything about the size of the image itself?
.window {
height: 400px;
width: 600px;
display: flex;
justify-content: center;
align-items: center;
background: red;
}
.container {
height: 80%;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: blue;
}
.wrapper {
display: inline;
max-height: 100%;
max-width: 100%;
background: yellow;
}
img {
max-height: 100%;
max-width: 100%;
}
.test {
width: 64px;
height: 128px;
background: green;
}
<div class='window'>
<div class='container'>
<div class='wrapper'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/ReceiptSwiss.jpg/1920px-ReceiptSwiss.jpg" />
</div>
</div>
</div>
<div class='window'>
<div class='container'>
<div class='wrapper'>
<div class='test' />
</div>
</div>
Im trying to wrap a div around a image both when the width or height changes.
The issue is that when the width changes the div does not tightly wrap against the child in this case the child is a image:
Wrap div around a image current result
I did determine that setting the flex-direction between row and column solves it when the div gets resized and could use something like a resize observer to toggle the flex direction but hope there is a css solution to this?
Here is a code pen with the issue: https://codepen.io/quinnaz/pen/rNJdjJy
<div class="container direction-row">
<div class="border">
<img src="https://dummyimage.com/400x600/d4b9d4/7477a3.png" class="img-element" />
</div>
</div>
.container {
resize: both;
overflow: auto;
background-color: beige;
border: solid;
display: flex;
}
.direction-row {
flex-direction: row;
}
.direction-col {
flex-direction: column;
}
.img-element {
max-width: 100%;
max-height: 100%;
display: block;
}
.border {
border-width: 50px;
border-color: blue;
border-style: solid;
}
You need to use the object-fit property and give it the value cover. I would also change max-width and max-height to width and height respectively.
The replaced content (in this case an image) is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
codepen link https://codepen.io/thechewy/pen/ZErxevo
.img-element {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
** EDIT **
If you want it to fully fit the .container div you'll then need to make the .border div fill the parent .container with width: 100%; height: 100%; set on .border, this isn't clear in the question though. If not the above snippet should do the trick.
Personally I would just add the border to the image and remove the extra div and CSS.
I want to make a gif image responsive to resize it to cover the width of every mobile device. This is because for some reason I can get a video to autoplay in certain IOS devices, so I though of converting the video into a gif. Now, how can I make it responsive? I don't really care about the height, is more of a width problem.
this is my oode so far:
.box {
width: 500px !important;
}
<div class="box">
<img src="examplegif" alt="Example gif" style="width:340px;height:170px;">
</div>
you have to set the maximum width to the image or video in this case of the gif.
<style>
.box {
display: flex;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
</style>
<html>
<body>
<div class="box">
<img src="https://media.giphy.com/media/VRhsYYBw8AE36/giphy.gif" alt="Example gif">
</div>
</body>
</html>
The first step would be to remove width: 500px from the parent container .box. This explicit width restricts the image from being able to fill the entire viewport since it's parent containers width is only 500px. Next, there is an 8px default margin on the <body> from the user agent stylesheet. Using margin: 0 within the body styling will ensure there isn't any extra space around your content.
To make the GIF responsive and fill the entire viewport width, you can add some styling to the nested <img> elements in .box. I gave the images a width and max-width of 100% to ensure they take up all the available space. For the image height, use height: 100% to make sure it's 100% of the containing blocks height or height: auto to let the browser calculate and select a height for the specified element. Try this out.
body {
margin: 0;
padding: 0;
}
.box{
width: auto;
}
.box img {
max-width: 100%;
width: 100%;
height: auto; /* vary this to your needs ie auto, 100%, etc */
margin: 0 auto;
}
<div class="box">
<img src="https://media.giphy.com/media/ZqlvCTNHpqrio/giphy.gif" alt="Example gif">
</div>
You can make your image responsive by applying the following class to your image.
CSS:
.responsive {
max-width: 100%;
width: auto;
height: auto;
}
and HTML:
<img src="ypurgif" class="responsiveImage" />
I tried many ways to achieve this but without success.
Basically, I want to have a div element (like a card) with an image and a text under the image and the goal is to make it responsive so that when the user scales down the browser or they use their phone, this whole div does not get messed up but keeps its proportions. The goal is to have multiple card-like divs setup in a 3x3 matrix. The requirement is that no matter what image is there, it just fills the container - the image should not keep its aspect ratio if its too big, it should always be a squere.
link to current state*
(*it says I am too low level to have images in my posts)
As you can see, the current problem is that the image itself does not fill in the container but, keeps the aspect ration which means the whole container div is different height and it gets pushed to another line instead of making it 3x3. That is as far as I got.
Code is here:
.box {
max-width: 120px;
max-height: 120px;
}
.card-image {
width: 100%;
height: 100%;
max-width: 90px;
max-height: 90px;
border: 1px solid black;
}
<div class="box">
<img ng-src="{{item.img}}" ng-if="item.img" class="app-image" />
<div style="font-size:80%;">{{item.name}}</div>
</div>
I am using angular to fill in the images but that should have no impact on the solution. As far as I know, setting width and height by adding "vw"s to these css parameters is not the best way because then it keeps these values fixed and it is not really responsive
So, at the end of the day, there are two ways you can help me out:
1) with the current code I have, add some css that will make the images stretch its height so that it is the same as width
2) suggest more optimal solution
Thank you
I think the easiest way, with nice browser compatibility would be something like this:
.item {
width: 30%;
height: 0;
padding-top: 30%;
display: inline-block;
background-size: cover;
background-position: center;
}
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
resize: both;
overflow: auto;
}
<div class="container">
<div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)"></div>
<div class="item" style="background-image: url(https://dummyimage.com/400x400/000/fff)"></div>
<div class="item" style="background-image: url(https://dummyimage.com/300x400/000/fff)"></div>
</div>
The image will always fill the whole container, and container will keep ratio. You will need to work a little bit on multi row layout, but still I find it the easiest way.
.card-image {
width: 100%;
height: 100%;
max-width: 90px;
max-height: 90px;
border: 1px solid black;
object-fit:fill; /* try fill,cover,contain for different results*/
}
For more info Object fit CSS tricks
I have a two column layout - fixed right column width, an scalable content in the left column.
The layout scales great with different screen sizes until I add images to the scalable column. If the container goes down to the size of the image it pushes the column too wide, squashing my 300px right column.
I set
width:100%;
on the images, which solves the responsiveness issue, but when the container is full screen again the images scale to fill it, which is not what I want because it looks rubbish. I've added
max-width:100%;
which hasn't helped.
In short, I want the image behaviour to be "Be your real size, unless the container is smaller, in which case shrink."
(I should mention that my two-column layout is done with flexbox)
Edit:
After playing around with this for ages, it turns out to be a difference in behaviour between broswers - Chrome scales the container, shrinking the image (as per max-width) but Firefox just pushes all the content out. Open this in each: https://jsfiddle.net/andyg1/sb7zefr5/
Remove width:100%; and keep max-width:100%;. This will keep images at their original size but shrink them to 100% width if the container is smaller.
Here's an example https://jsfiddle.net/v4kL409v/
You can use width: 100% and the real size if the image or the maximum size of the conainer as max-width, for example
my_image {
width: 100%;
max-width: 320px;
}
That way it will shrink with the container, but not grow above a set size.
You can use an image as a background to your flex-item.
background-image, background-repeat, background-position, and most importantly background-size
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.flex {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.bg {
width: 50vw;
height: 50vh;
background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center;
background-size: contain;
outline: 3px dashed red;
flex: 1 0 50%;
}
.rt {
width: 300px;
height: 50vh;
outline: 3px dashed blue;
}
<div class="flex">
<figure class="bg"></figure>
<figure class="rt"></figure>
</div>
After identifying that the problem is different between Firefox and Chrome I did some research to find out that the problem can be fixed by adding:
min-width:0;
to the element containing the responsive. As discussed here: Firefox flexbox image width
Add display:block to image.
.my_image {
display:block;
max-width:100%;
height:auto;
}