This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
Is it possible to contain/limit the height of an image in a column flexbox? In this fiddle, I would like to make the image be displayed in a reduced size in order to make the title underneath it be just inside the bottom of the flex parent.
Ideally, I would like to do this with a 100% CSS solution.
Here is the fiddle: https://jsfiddle.net/brandoncc/czLjoxdu/4/
The basic CSS code is:
div {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid green;
width: 400px;
height: 300px;
}
Just add a new class
img
{
height:50%;
}
Change the percentage as you like.
try this..
<div>
<img src="http://placehold.it/350x350" / class="img-fluid">
<p>Image title</p>
div {
border: 1px solid green;
width: 400px;
height: 300px;
position:relative
}
You may add the following to keep the image from overflowing and use the max space. You can change the percentage to smaller the image. Just tweak it an see what works best for you.
img {
height: 100%;
}
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
[Duplicate]
answer here Image inside div has extra space below the image
I display some images with different sizes along multiple rows.
Example here
But there are gaps between the rows. I've tried a lot, but couldn't find why.
<div class="muralBox">
<div class="wrapper">
<div v-for="(topAlbum, i) in topAlbumInfo.value" :key="topAlbum.name" class="albums">
<Album :info="topAlbum" :width="layoutConfig[i].width"/>
</div>
</div>
</div>
And in Album.vue
<img :src="img" :width="width" :height="width" alt=""/>
And css:
.muralBox {
margin: auto;
max-width: 400px;
min-width: 400px;
}
.wrapper {
background: #1f1c2c;
display: flex;
flex-wrap: wrap;
}
I'm not sure if this is exactly what you wanted since I can't see how you styled them, but I just gave images 100% height and width and that basically did it in a codepen.
CodePen link
.albums img{
height: 100%;
width: 100%;
}
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
How to center a "position: absolute" element
(31 answers)
Closed 2 years ago.
im trying to put my image on the middle top off my box. I'm sorry if this is a stupid question but I'm new to coding and I'm young. I searched on the code, everything's fine except this part. It makes my image is on like the middle mid, a bit on the left which is not what I want. Thanks
.profile img
{
position: absolute!important;
left:calc(50% - 60%px)!important;
border: 10px solid #fff!important;
}
this is what it gives me
This will also help;
.profile{
position:relative; /* set whatever height and width to this div */
}
.profile img{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border: 10px solid #fff;
}
Try using Flexbox containers. Using justify-content and align-items, you should be able to put your image at the top center of your div without using absolutes. The W3 links show examples of both properties--combine them and you should achieve your desired result.
Using margin:auto (by making img tag as display:block)
div {background: yellow; height: 400px;}
img {border-radius:50%; margin:auto;display:block;}
<div class="wrapper">
<img src="https://picsum.photos/100" />
</div>
Using Flexbox
div {background: yellow; height: 400px; display: flex; justify-content:center;}
img {height: 100px; border-radius: 50%;}
<div class="wrapper">
<img src="https://picsum.photos/100" />
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 2 years ago.
I have a flex container with flex children inside of it. In every flex-child there are 2 divs on top of each other, first one is with unknown height. I want to make the second div's height to fill the whole remaining height. Everywhere I look I see flex solution, but I don't know how to implement it since parent of the 2 divs is flex-child itself.
The whole case is more complex, but I'll try to simplify code here:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"></div>
<div class="i-want-this-one-to-fill-remaining-height"></div>
</div>
...more flex children...
</div>
And putting ".auto-height" div inside ".i-want-this-one-to-fill-remaining-height" is not an option at this moment.
Please help :) Thank you!
EDIT: I've made a full Fiddle: https://jsfiddle.net/vanden1976/dLg20x4s/26
EDIT-2: Solved! Thank you for your suggestions! Here's the fiddle with the solution: https://jsfiddle.net/vanden1976/dLg20x4s/29
It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.
Html:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"> auto div</div>
<div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
</div>
</div>
CSS:
.flex-parent-row {
display: flex;
flex-direction: column;
height: 200px;
width: 500px;
border: 1px solid #000;
}
.flex-child {
border: 1px solid #000;
background-color: red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.auto-height {
background: orange;
}
.i-want-this-one-to-fill-remaining-height {
flex-grow: 1;
background-color: lightblue;
}
If you need additional help please provide more code.
I have a little question about CSS : I would like to do some responsive stuff with divs.
To be more precise, I would like to have a big div containing little divs inside. Those divs may vary in number, but they should all have a fixed size (for example, let's say 250px). So I would like to know if there is a way to make a kind of flex solution, so that divs are always justified, and as soon as the screen is to small to show for example 6 little divs per line, it only shows 5 divs per line.
I am pretty sure, that is not very clear, so here are two draws :
This is the first situation, the div is large enought to have 4 subdivs per line
Then, this div can't display 4 subdivs per line : so it shows 3 subdivs
Flexbox is useful here. Here's a Codepen that does what you're looking for:
https://codepen.io/ksmessy/pen/rmRbdL
As you shrink the window, the items will wrap to the next line. I separated the 3 flex properties in .flexparent with a line break so you can see what is causing this behavior.
HTML:
<div class="flexparent">
<div class="flexchild"></div>
<div class="flexchild"></div>
<div class="flexchild"></div>
<div class="flexchild"></div>
<div class="flexchild"></div>
</div>
CSS:
.flexparent {
border: 3px solid black;
width: 550px;
max-width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.flexchild {
border: 1px solid red;
width: 100px;
height: 100px;
margin: 10px;
}
This question already has answers here:
How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
(36 answers)
Centering image horizontally and vertically [duplicate]
(5 answers)
Closed 9 years ago.
I am trying to horizontally center a large image. Because I am using HTML5, I can't use <center>. I could use left:400px, but that wouldn't work for different screen sizes.
Wrap the image inside an element and use text-align: center;...
Demo
<div class="center">
<img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="Google" />
</div>
.center {
text-align: center;
}
Alternatively if you are aware, that what's the image width, you can also use margin: auto; with display: block; as img tag is inline element by default and of course, the width property
img {
width: 276px;
display: block;
margin: auto;
}
Demo 2
Try this css to horizontally center
display: block;
margin: 0 auto;
= the top and bottom margin 0, and the left and right margin auto
Use CSS text-align: center;. And don't forget to set width on the div or it will look left-aligned.
<div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>
Depending on your specific situation, this has worked for me on several projects:
<style>
.outer{float: left; position: relative; left: 50%;}
.inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
<div class="inner">content you want to center, image, text, whatevs</div>
</div>
The IMG element is inline, by default. So, as the others have pointed, you have two options:
1) Keep it inline, and use text-align: center;.
2) Make it a block element with display: block;, and then use margin: auto;, which works only on block elements. I think this solution is better. Setting the width is just another way to force it to be a block element, but it's less obvious for someone that may read the code later. So explicitly setting the display type to block is better for readability.
If your element has the width property , then give it margin:auto;.