So I want to have text next to the image, and both centered. Flexbox seems like it could work well for this but the image keeps getting squished. Any ideas of how I can keep the image in its original aspect ratio?
.container {
display: flex;
width: 60%;
margin: 0 auto;
border: red 1px solid;
}
img {
height: 300px;
width: 300px;
}
p {
padding: 30px;
}
<div class="container">
<p class="inner">Lorem Pisum Doelem sipsum iflup getsup in da tubsusb
</p>
<img src="https://i.vimeocdn.com/portrait/15351700_300x300" />
</div>
This is an example of what I'm trying to do. I think flex box will work for this, I'm just having a little trouble.
http://mojave-demo.squarespace.com/our-team-mojave/
You will need to put the image into another container so that its intrinsic dimensions will not be affected.
.container {
align-items: center;
display: flex;
width: 60%;
margin: 0 auto;
border: red 1px solid;
}
.image {
flex: 1;
max-width: 50%;
min-width: 50%;
}
img {
width: 100%;
height: auto;
display: block;
}
p {
padding: 30px;
flex: 1;
}
<div class="container">
<p class="inner">Lorem Pisum Doelem sipsum iflup getsup in da tubsusb
</p>
<div class="image">
<img src="https://i.vimeocdn.com/portrait/15351700_300x300" />
</div>
</div>
Like this?
https://jsfiddle.net/y5k9zqby/
.container {
display: flex;
width: 100%;
margin: 0 auto;
border: red 1px solid;
}
img{
max-height: 300px;
width: 100%;
overflow:hidden;
}
p{
padding: 30px;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Did try already several flex arguments but none of them worked like selg-align and self-content.
So the idea is the fit the image to the square and center it vertically and horizontally...
Does anybody can help with this thanks...
I am unsure of the why i need to edit this topic... it's just a simple question on how to fit the image in the square and center it vertically and horizontally (obvious to such square)... Don't understand where is the confusion about the question...
My examples is at https://jsfiddle.net/ej3814sn/
.five {
height: 20%;
border: 1px solid #fff;
}
.five-a {
float: left;
color: white;
}
.five-b {
float: right;
color: white;
}
Thanks in advance
You need to wrap your img in a div and outside of five - Using float is not a good idea at all in modern browsers.
Use flex to achieve your desired results and it is very responsive in modern browsers as well. Also set the height of .one to auto make sure img always centered and below the numbers.
Live Demo:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
width: 100px;
height: auto;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 20%;
display: flex;
justify-content: space-between;
}
.five-a {
color: white;
margin-left: 5px;
}
.five-b {
color: white;
margin-right: 5px;
}
img {
width: 90%;
height: auto;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<div class="img-div">
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</div>
</body>
The best way, to position elements, is to use position property. Notice that I have made a change in HTML code as well. Put the image out of five element. Now talking about CSS, position both img and five as absolute. You would have to set top to 0, width to 100% for five. And for img, just set self-align to center.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
justify-content: center;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
position: relative;
}
.five {
height: 20%;
width: 100%;
position: absolute;
top: 0;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
img {
width: 90%;
position: absolute;
height: auto;
align-self: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</body>
I think you are looking to center the image in the .five div, yes?
EDIT: Remove the image tag and place your image as a background of the element you wish to center it in... Then add no-repeat, 0% to position and set the bg size to 100%, however change the height of the element to 100% as well...
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
/*fit image to the square and center it*/
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<span class="five-a">1</span>
<span class="five-b">10</span>
<img src="">
</div>
</div>
</div>
</div>
</div>
I can't seem to have a horizontally-scrolling div inside a flex column.
Codepen
.container { display: flex; margin: 20px; height: 300px; border: 1px solid blue; }
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { padding: 20px; }
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<div class='side-nav'>
</div>
<div class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</div>
</div>
If I change the max-width of .scrollable to px it would work, but I need it to fill the column.
What am I missing?
In my opinion, this is a Module"bug" (Wierd).
Anyway, one very simple solution is to use flex-basis (Instead of width).
Step 1 for main add width: 0;
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
Step 2 - main add flex-basis: 100%;
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
flex-basis: 100%;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
One more option is to use width: 0; & flex-grow:1
.container {
display: flex;
margin: 20px;
height: 300px;
border: 1px solid blue;
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main {
padding: 20px;
border: 5px dashed orange;
/* "new code" */
width: 0px;
flex-grow: 1;
}
.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }
<div class='container'>
<aside class='side-nav'>
Aside
</aside>
<main class='main'>
<h1>Test</h1>
<div class='scrollable'>
<div class='long-content'>
This is supposed to scroll horizontally unless your window is super wide
</div>
</div>
<p>Some paragraph below the scrollable box</p>
</main>
</div>
I don't like any of those ideas - but this is life hh.
How can I make all the images the same size while having them still be responsive?
Here's the fiddle:
https://jsfiddle.net/2ko9g725/2/
This is all the css:
.ui.text.menu {
background-color: #eee;
margin-top: 0;
}
.ui.message {
padding: 50px 50px;
margin-bottom: 20px !important;
}
.ui.grid.stackable.container {
display: flex;
flex-wrap: wrap;
}
Check this Demo. It may help you
CSS
img.ui.image{
max-width: 100%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
.ui.segment {
width: 100%;
}
Check this fiddle. You can put a wrapper div inside your ui segments for your image to sit in, then give that wrapper a height and width then add object-fit: cover to the img element in css with a width and height of 100%.
body {
margin: 0;
display: flex;
}
.segment {
width: 30%;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.seg-img {
height: 80%;
width: 100%;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1440658172029-9d9e5cdc127c?auto=format&fit=crop&w=1652&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1474015833661-686ed67f9485?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
i have just updated the fiddle with
images stretch on smaller viewports have been fixed
check this fiddle
i have just changed only in the css
img.ui.image{
overflow: hidden;
width: 100%;
max-width: 50%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
http://codepen.io/anon/pen/OMLLwB
#news {
width: 85%;
margin: 0 auto;
}
#news ul {
list-style: none;
margin: 0;
padding: 0;
}
#worldMap img {
width: 100%;
}
.newspiece {
margin-bottom: 2.5%;
padding: 20px;
background-color: #90C3D4;
height: 130px;
}
.newspiece h3 {
border-bottom: 3px solid black;
margin-bottom: 10px;
}
#media(min-width: 600px) {
.newspiece {
width: 25%;
margin-left: 5%;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.newspiece:first-child {
margin-left:0;
}
}
Am i missing something here? the width the total container (#news) is 85%, the width of each item is 25%, and two of them have a 5% left margin, total sums to 85%, then why do i resize it, the rightmost column goes down?
i have changed your html/css. this is a cleaner solution and is suported among all browsers
html:
<div class="flex">
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
<div class="box">
<h3>Title</h3>
<img src="http://www.placecage.com/400/300" alt="">
</div>
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
</div>
css:
.flex {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.box {
width: 300px;
margin: 10px;
padding: 20px;
background: #90C3D4;
}
.box h3 {
padding-bottom: 5px;
border-bottom: 3px solid black;
}
.box img {
max-width: 100%;
}
* { box-sizing: border-box; }
The padding adds to the total width of the element if box-sizing: border-box is not used.
I just want to align two divs next to each other and aligning the content vertically middle in each. Any help could save my mental health. Here is my code:
.main-kozossegitag-container {
display: block;
width: 100%;
height: 100%;
}
.main-kozossegitag-text1 {
display: inline-block;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
}
.main-kozossegitag-nev {
font-size: 2em;
}
.main-kozossegitag-title {
font-size: 1em;
}
.main-kozossegitag-visszhang {
font-size: 1em;
}
.main-kozossegitag-image1 {
display: inline-block;
width: 39%;
}
.profilkep {
max-width: 100%;
height: auto;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.5);
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}
<div class="main-kozossegitag-container">
<div class="main-kozossegitag-text1">
<h3 class="main-kozossegitag-nev">Rita</h3>
<p class="main-kozossegitag-title">CEO</p>
<p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p>
</div>
<div class="main-kozossegitag-image1">
<img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep">
</div>
</div>
As you see the two divs are next to each other, but I can not align the text vertically in the middle :(
.main-kozossegitag-container {
display: table;
width: 100%;
height: 100%;
}
.main-kozossegitag-text1 {
display: table-cell;
vertical-align : middle;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
}
.main-kozossegitag-nev {
font-size: 2em;
}
.main-kozossegitag-title {
font-size: 1em;
}
.main-kozossegitag-visszhang {
font-size: 1em;
}
.main-kozossegitag-image1 {
display: table-cell;
vertical-align : middle;
width: 39%;
}
.profilkep {
max-width: 100%;
height: auto;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.5);
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}
<div class="main-kozossegitag-container">
<div class="main-kozossegitag-text1">
<h3 class="main-kozossegitag-nev">Rita</h3>
<p class="main-kozossegitag-title">CEO</p>
<p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p>
</div>
<div class="main-kozossegitag-image1">
<img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep">
</div>
</div>
I added display : table; to your main container (main-kozossegitag-text1) and display : table-cell; vertical-align : middle to your both sub-div. Those properties let them have the same behaviour as a table and cells that contains vertically aligned content. I just messed up with some left/right margin but the rest seems to work.
Add Vertical-align to the second Div.
.main-kozossegitag-image1 {
display: inline-block;
width: 39%;
vertical-align: middle;
}
Please see my fiddle here.
I used CSS3 flex-box model. I changed properties for these classes:
.main-kozossegitag-container {
display: flex;
align-items: stretch;
flex-flow: row wrap;
width: 100%;
height: 100%;
border: 1px solid red;
}
.main-kozossegitag-text1 {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
box-sizing: border-box;
width: 60%;
padding-right: 20px;
}
More on CSS3 flex-box here.
Just add a float-left to this div :
.main-kozossegitag-text1{
display: table-cell;
vertical-align : middle;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
float: left;
}