I am using a bootstrap carousel. Inside of this, I put images (with unknown width and heigth). The width of the carousel is also unknown because the page is responsive. The heigth is know, for large screens is 500px and for small screens is 300px.
I want to center the images horizontally and vertically in the carousel, for that, I am using this:
HTML
<div class="item">
<div class="containerOut"><div class="containerIn"><img src...></div></div>
</div>
CSS
.item
{
heigth: 500px; /*for small screens is 300px*/
position: relative;
}
.containerOut
{
display: table;
heigth: 100%;
margin: 0 auto; /*for horizontal align*/
}
.containerIn
{
display: table-cell;
vertical-align: middle;
}
img
{
max-width: 100%;
display: block;
vertical-align: middle;
}
This works fine when the img dimensions are smaller than the width and heigth. But when the heigth img is more than 500px or when the img width is more than the width of the carousel, the img overflows the carousel. And I want to resize the image to completely enter in the carousel, in large and small screens.
I try to put max-width: 100% in the containers, but not works because the display: table attribute. I need the display: table attribute to vertical align, because I try other options but anything works.
What can I do to specify the max-width and max-heigth of 100% of the carousel images? Thanks!
Does this plunker solve the problem?
Here's the summary of changes:
img
{
width: 100%;
}
.item
{
height: 500px;
background: blue; /*added a color only to see the height*/
}
Since vertical-align is already on your .containerIn div, you shouldn't need to also apply it to the images.
Related
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 have two images centered side-by-side in a div. Both are restricted by a max-width property, but one image is significantly taller than another. I'd like the taller image to match the height of the smaller image and adjust its size based on viewport size.
My current code is as follows for the container
<div class="process">
<img src="http://via.placeholder.com/926x2260">
<img src="http://via.placeholder.com/1584x1926">
</div>
with the CSS as
.process {
text-align: center;
}
.process img {
margin: 4rem 3rem;
display: inline-block;
max-width: 40%;
}
A max-height of 740px looks perfect with a full-sized viewport but isn't responsive. I'd like this to be done in CSS and without an extra container for the larger image, but I'm not sure if that's possible.
Here's a jsfiddle to see what it looks like.
The images are a screenshot of a mobile and tablet layout of a website, so they should retain their ratio--if there's a better way to display these I'll take other ideas too!
Make them size based on the parent div. Check this out:
.process {
text-align: center;
height: 70vh;
}
.process img {
margin: 4rem 3rem;
display: inline-block;
width: auto;
}
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;
}
I'm having a bit of a struggle here with positioning an image inside a div.
The div is fixed to 219x197px but images are loaded with wordpress and I need to proof it so that even if the image is smaller or larger than that, it will be centered and with overflow hidden if larger and either stretched or centered if smaller (what happens when its smaller doesn't really matter).
I do not want to resize the image, I just want to show it centered and whatever fits on the div shown while the rest is hidden with overflow.
I found another question around with which I managed to center it horizontally, but I cannot do it vertically.
I tried some margin-left with percentage but it is not constant with different image sizes.
I also tried some stuff with line-height and vertical-align but nothing seems to work properly.
Does anyone know anything I could try? Thanks in advance!
Here's the HTML and CSS as it works to center horizontally:
<div class="img_article">
<span>
<?php get_post_image($post->ID,'large'); ?>
</span>
</div>
.img_article {
border-bottom: 1px solid #EF5589;
overflow: hidden;
width: 219px;
height: 197px;
text-align: center;
}
.img_article > span {
display: block;
width: 1000px;
height: 1000px;
margin-left: -390px; /* -(width-container width)/2 */
}
.img_article > span > img {
display: inline-block;
}
I don't know what you tried with line-height and vertical-align, but it should be working.
.img-hold { height: 200px; line-height: 200px; text-align: center; }
.img-hold img { verticale-align: middle; }
Demo
I have a gallery slider, with random images from the forum. So, the size is pretty random but the gallery(container frame) itself is fix sized. So, we decided to set the image height to a fixed size but the width is set to auto. This way, the image will not be squeezed inside the container if its ratio different is too much from the container ratio.
Then, I set the container's text-align to center in order to center the image. But, this only works for images smaller than the container. If the image is still bigger than the container (after resize), the image is aligned to the left instead.
The jsffidle example.
NOTE: Using background-image is not a solution because resizing background image currently is still not supported by many browsers (especially IE and some Chinese browsers).
Hope there is enough information here. So, how do I center the image in this situation?
I have found another solution
<style type="text/css">
.container {
width:600px; //set how much you want
overflow: hidden;
position: relative;
}
.containerSecond{
position: absolute;
top:0px;
left:-100%;
width:300%;
}
.image{
width: 800px; //your image size
}
</style>
and in body
<div class="container">
<div class="containerSecond">
<image src="..." class="" />
</div>
</div>
This will center your image whenever your container is bigger or smaller. In this case your image should be bigger than 300% of container to not be centered, but in that case you can make with of containerSecond bigger, and it will work
You would use max sizes:
img {
max-width: 200px;
max-height: 200px;
}
Take a look: http://jsfiddle.net/fabianhjr/zW6eh/
Edit: still having centring problems, I will get back to you on that.
I had similar problem, but the solution was about to crop right and left margin, while the image should be centered. Smaller images are stretched.
My solution is also in this JS Fiddle: http://jsfiddle.net/david_binda/9tTRQ/
HTML
<div class="thumb-wrapper">
<a href="" title="" class="img">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/40/Tectonic_plate_boundaries.png" alt="" />
</a>
</div>
CSS
.thumb-wrapper{
width: 200px; // desired thumbnail width
height: 150px; // desired thumbnail height
overflow: hidden;
position: relative;
margin: 0 auto;
}
.thumb-wrapper .img{
display: block;
position: absolute;
width: 300px; // should be wider than final thumbnail
height: 150px; // desired thumbnail height
left: 50%;
margin-left: -150px; // half of above defined width eg. 300/2 = 150
}
.thumb-wrapper .img img{
width: auto !important;
max-width: 300px !important; // should be wider than final thumbnail
min-width: 200px !important; // desired width of thumbnail
height: 150px !important; // desired thumbnail height
margin: 0 auto;
display: block;
}
The solution that I've found is:
img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);//You have to add all the prefixes
//of transform
}
div.container{
position:relative;
overflow:hidden;
}
Okay, I think this is your best solution.
You set your wrapper around each image to display: table; and then one more wrapper inside that with a display: table-row; and set your img's to display: table-cell
This way you can resize anyway you like while keeping the ratio.
http://jsfiddle.net/zW6eh/17/
You can also simply set your height: to 200px; This will keep your width auto by default.