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;
}
Related
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.
My css is below. What I want is the header shall be fixed at top of the page and having width equal to the width of container irrespective to the changing width of browser. However, I always get the width of header expands over the width of Container. Please instruct me how to fix it?
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
display: grid;
grid-template-columms: auto auto;
grid-template-rows: 170px 60px;
position: fixed;
top: 0px;
margin: 0 auto;
}
<div class="container">
<header>
<div class="cart">
</div>
</header>
Set the width of the header to 80%;
Works automatically..
* {
margin:0;
padding:0;
}
.container {
width: 80%;
margin: auto;
border: 1px solid red;
height: 150vh;
}
header {
background: green;
position: fixed;
width: 80%;
top: 0;
height: 50px;
}
<div class="container">
<header>
<div class="cart">
</div>
</header>
Codepen Demo
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
I have a very not typical site where content is aligned by the middle of screen I mean vertically and horizontally, for getting this result used vertical-align: middle; for each item and for the main container
text-align: center; height: calc(100% - header - footer ))
but when the user is changing size
for the window the footer is also change his position but should not do it
Js fiddle
https://jsfiddle.net/hm97o1sa/
is there any way to fix it without "flex" ?
updated:
expected behavior
scrolled to the top
scrolled to the bottom
A possible solution would be to use calc together with Viewport units vh.
With calc(), you can perform calculations to determine CSS property values.
With Viewport units, you can get work with Viewport size, for example in this case 100% of the Viewport height (vh).
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100vh - 150px);
min-height: 250px;
text-align: center;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
Modify your CSS and your Final code will be:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100% - 150px);
text-align: center;
overflow-y: auto;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>TA</title>
</head>
<body>
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
A quick fix is to apply a min-height: 250px on your #content
#content {
height: calc(100% - 150px);
min-height: 250px;
text-align: center;
}
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;
}