I'm building a component that will have variable content. So I'd like the img to respond like a bg img, taking the height of it's container rather than defining the height. Even when I define add object-fit: cover though, the img still affects the height of it's parent. I want the text to define the height of the parent, not the img. I would prefer not to use a background img as the image is populated via a wysiwyg editor and I don't have control over where the uploaded img is loaded (ie. it has to be an img). Thanks for your help.
Codesandbox
CODE:
.container {
display: flex;
flex-direction: row;
padding: 20px;
background: lightblue;
width: 80%;
}
.img-item {
align-self: stretch;
flex-shrink: 2;
}
.img-item img {
object-fit: cover;
height: 100%;
width: 100%;
}
.text-item {
flex-shrink: 3;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="img-item">
<img src="https://i.imgur.com/2bvab7y.jpg" alt="" />
</div>
<div class="text-item">
<h1>
Heading one
</h1>
<p>Hello world. You're the best.</p>
</div>
</div>
</body>
</html>
you are missing the flex-basis CSS property
.container {
display: flex;
flex-direction: row;
padding: 20px;
background: lightblue;
width: 80%;
}
.img-item {
align-self: stretch;
flex-shrink: 2;
}
.img-item img {
object-fit: cover;
height: 100%;
width: 100%;
}
.text-item {
flex-shrink: 3;
padding: 20px;
}
[class$=item]{flex-basis: 120px;}
<div class="container">
<div class="img-item">
<img src="https://i.imgur.com/2bvab7y.jpg" alt="" />
</div>
<div class="text-item">
<h1>
Heading one
</h1>
<p>Hello world. You're the best.</p>
</div>
</div>
Related
I have created an HTML template, to which I will push data from SQL using python and print it as pdf. The document needs to be printed always in landscape. I have achieved the functionality, but the logo on the right gets offset by an awkward amount and looks odd.
Please find the image as below:
However, if I don't resize the image, the spaces are somewhat even but the image is too big, as below:
My code is as below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
background-color: powderblue;
}
#media print {
#page {
size: landscape;
}
}/*required because this page will always have to be printed in landscape */
.Row{
display: flex;
}
.Cell{
align-items: center;
}
.Cell h1{
align-items: center;
text-align: center;
}
.Cell h2{
text-align: center;
}
.Cell .logo{
width: 30%;
height: auto;
}
</style>
</head>
<body>
<div class="Row">
<div class="Cell">
<img src="logo1.jpg" alt="logo1" class="logo">
</div>
<div class="Cell">
<h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
<h2>THIS IS A SUBHEADING</h2>
<br>
<h2>ANOTHER SUB HEADING</h2>
</div>
<div class="Cell">
<img src="logo2.jpg" alt="logo2" class="logo">
</div>
</div>
</body>
</html>
If anyone could point out to me how to make the logo equidistant from the headings, it would be much appreciated.
I have reconstructed your code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
background-color: powderblue;
}
#media print {
#page {
size: landscape;
}
}/*required because this page will always have to be printed in landscape */
.Row{
display: flex;
flex-direction: row;
/* align-items: center; */
justify-content: center
}
.Cell{
/* justify-content: center */
align-items: center;
text-align:center;
}
.Cell .logo{
width: 30%;
height: auto;
}
</style>
</head>
<body>
<div class="Row">
<div class="Cell">
<img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo1" class="logo">
</div>
<div class="Cell">
<h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
<h2>THIS IS A SUBHEADING</h2>
<br>
<h2>ANOTHER SUB HEADING</h2>
</div>
<div class="Cell">
<img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo2" class="logo">
</div>
</div>
</body>
</html>
This below link will guide you much better way:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Setting the width of <img> elements to percentage value is a little confusing because their containers don't have a specified width, so it isn't clear what the width should be.
I assume you wanted the first and last .Cell to be 30% wide, but logos smaller and pushed to the opposite ends of the page. I set the width of the logos to be 100px, but you can tweak that as you like. The key part is pushing the logo in the last .Cell to the right, one way to do it using Flexbox:
.Cell:last-child {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
The align-items declaration is there so that the logo doesn't stretch to take up the height of the container.
I also removed some of the the align-items declarations from your code that weren't doing anything because they weren't Flex containers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
background-color: powderblue;
}
#media print {
#page {
size: landscape;
}
}
.Row {
display: flex;
justify-content: center
}
.Cell h1{
text-align: center;
}
.Cell h2{
text-align: center;
}
.Cell:first-child,
.Cell:last-child {
width: 30%;
}
.Cell:last-child {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.Cell img {
width: 100px;
height: auto;
}
</style>
</head>
<body>
<div class="Row">
<div class="Cell">
<img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo1" class="logo">
</div>
<div class="Cell">
<h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
<h2>THIS IS A SUBHEADING</h2>
<br>
<h2>ANOTHER SUB HEADING</h2>
</div>
<div class="Cell">
<img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo2" class="logo">
</div>
</div>
</body>
</html>
I've created a carousel of images inside of a flexbox, and given each of them a width of 200px. I'd like the images to resize at the same rate when I shrink the window, so I gave them each a flex-shrink value of 1.
However, as you can see from the gif, only the second image resizes when I shrink the window (the others stay the same width). I checked the original file sizes and noticed that the second image also has the smallest width (so I assume this could be causing the issue?)
However, I'm not exactly sure how to fix this. Any help would be appreciated.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>your page title goes here</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<h1>My Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="img/dog1.jpeg" alt="first dog">
<figcaption>Example Photo</figcaption>
</figure>
<div class="slider">
<img src="img/dog2.jpeg" alt="second dog"/>
<img src="img/dog3.jpeg" alt="third dog"/>
<img src="img/dog4.jpeg" alt="fourth dog"/>
<img src="img/dog5.jpeg" alt="fifth dog"/>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(46, 46, 46)
}
h1 {
font-family: helvetica;
color: white;
}
.container {
padding: 30px 20px;
text-align: center;
max-width: 1000px;
min-width: 500px;
background-color: rgb(66, 66, 66);
margin: 0 auto;
}
figure {
text-align: left;
}
figcaption {
color: white;
}
img {
width: 100%;
}
.gallery {
display: flex;
flex-flow: column;
}
.slider{
margin-top: 32px;
display: flex;
justify-content: space-between;
}
.slider img {
display: block;
width: 200px;
max-height: 200px;
object-fit: cover;
flex-shrink: 1;
}
In this case if you don't want to add any extra markup just replace width:200px; in .slider img to min-width:200px;.
If you want to maintain a completely fluid layout you could replace min-width:200px; with something like min-width:25%.
As I mentioned in my other answer if you're willing to add a container to each of these images you'll have a bit more control as you can make the image expand to fill the container, regardless of what its dimensions are.
Try using a media query
example:
#media(max-width:700px){
.slider img {
width: 100px;
height: auto;
}
}
I have a 4x11 grid and I am trying to place an image and caption next to it within the same area. Currently, the image is sitting above the text, rather than to the left in line with it:
<div class="Time">
<figure class = "Time-icon">
<img src="/images/time.png" alt="time icon" width= "20%" height= "20%">
</figure>
<h2>Time</h2>
</div>
.time {
grid-area: 10 / 3 / 12 / 4;
align-items: center;
padding-left: 85px;
}
.time-icon{
float: left;
display: block;
}
How would I go about making the icon sit nicely to the left inline with the text?
I think you can use this css.
.time {
display: flex;
justify-content: center;
align-items: center;
}
.time-icon {
margin: 0 8px 0 0;
width: 20%;
height: 20%;
}
.time-icon img {
width: 100%;
height: 100%;
}
html
<div class="time">
<figure class = "time-icon">
<img src="/images/time.png" alt="time icon">
</figure>
<h2>Time</h2>
</div>
you should use for this display flex, not float left.
.container{
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="hec.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" width="60px" height="60px" alt="logo">
<h2>This is a logo!</h2>
</div>
</body>
</html>
I have a flexbox that has two columns, each of which is 50% wide.
Then I want to add a big square picture in the right column, the height of the picture should be determined by the contents' height in the left column. (More content will be inserted into the left column in the future)
But the height and max-height always don't work with my image in the flexbox
, which causes the right column to be stretched.
CodeSandbox: https://codesandbox.io/s/modest-rgb-u7k3k
Ideal:
Image link 1
Real:
Image link 2
NOTE: I added a set height of 150px to #flexbox and changed the image url to a direct link for demonstrative purposes so you can see it working in action.
First, you had ".img-wrapper" instead of ".wrapper" for the img css, not sure if that was on purpose or not but i switched it to ".wrapper" since that was the parent classname. Second, you only need the max-width for the effect to work. For the img css, I added "object-fit: cover" which maintains the img's aspect ratio while filling the entire container. Last, I gave the ".wrapper" container a "text-align: center" property so that the img will be centered in the container.
* {
box-sizing: border-box;
}
body {
width: 400px;
}
#flexbox {
display: flex;
height: 150px;
}
#flexbox .item:first-child {
flex: 0 0 50%;
padding: 10px;
background-color: bisque;
}
#flexbox .item:last-child {
flex: 0 0 50%;
padding: 10px;
background-color: aquamarine;
}
#flexbox .item:last-child .wrapper {
width: 100%;
height: 100%;
background-color: red;
text-align: center;
}
#flexbox .item:last-child .wrapper img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css" />
</head>
<body>
<div id="flexbox">
<div class="item">
This is the first box.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
Contents here.<br />
</div>
<div class="item">
<div class="wrapper">
<img src="https://i.imgur.com/HyWA2Jq.png" />
</div>
</div>
</div>
</body>
</html>
I am trying to put the input textfield inside my image. I already put my code inside my flexbox however the flexbox is working and responsive but when i do try to put the textfield inside the image. Its not working.The problem is even i try to make the input position to relative its still not display inside the image and not responsive. Can someone help me
body {
background-image: url(images/loading_bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
.box {
width:80%;
min-height:80vh;
margin:auto;
border:1px solid;
display: flex;
align-items: center;
justify-content: center; /* not really needed with auto margin on img*/
margin-top: -80px;
}
.box input {
position:relative;
width: 20%;
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
margin-left: 50%;
}
.box img {
position: relative;
display: block;
width: 80%;
min-width:100px;
max-width: 450px; /*actual image width*/
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/loading_bg.png);
}
}
<!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Six Revisions">
<meta name="description" content="How to use the CSS background-size
property to make an image fully span the entire viewport.">
<link rel="icon" href="http://sixrevisions.com/favicon.ico"
type="image/x-icon" />
<link href="http://fonts.googleapis.com/css?
family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<link rel="stylesheet" href="presentational-only/presentational-
only.css">
<link rel="stylesheet" href="responsive-full-background-image.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="presentational-only/presentational-only.js"></script>
</head>
<body>
<header class="container">
<section class="content">
<div class="box">
<input type="text" name="name" placeholder="name">
<img src="http://via.placeholder.com/350x250" width="350"
height="250" alt="missing image">
</div>
<p><a class="button" id="load-more-content" href="#top">Load some
content</a></p>
</section>
</header>
</body>
</html>
Is this what you're looking for??.. i have put image and input in 1 div .outer.
Made it position relative and and the input absolute and adjusted it accordingly.
thanks
body {
background-image: url(images/loading_bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
.box {
width:80%;
min-height:80vh;
margin:auto;
border:1px solid;
display: flex;
align-items: center;
justify-content: center; /* not really needed with auto margin on img*/
/* margin-top: -80px; */
}
.box input {
position: absolute;
width: 20%;
height: auto;
margin: auto;
/* margin-left: 50%; */
z-index: 1;
top: 50%;
left: 0;
transform: translatey(-50%);
}
.box img {
position: relative;
display: block;
width: 80%;
min-width: 100px;
max-width: 450px;
height: auto;
/* margin: auto; */
}
.outer{
position: relative;
width: 350px;
margin: auto;}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/loading_bg.png);
}
}
<!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Six Revisions">
<meta name="description" content="How to use the CSS background-size
property to make an image fully span the entire viewport.">
<link rel="icon" href="http://sixrevisions.com/favicon.ico"
type="image/x-icon" />
<link href="http://fonts.googleapis.com/css?
family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<link rel="stylesheet" href="presentational-only/presentational-
only.css">
<link rel="stylesheet" href="responsive-full-background-image.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="presentational-only/presentational-only.js"></script>
</head>
<body>
<header class="container">
<section class="content">
<div class="box">
<div class="outer">
<input type="text" name="name" placeholder="name">
<img src="http://via.placeholder.com/350x250" width="350"
height="250" alt="missing image">
</div>
</div>
<p><a class="button" id="load-more-content" href="#top">Load some
content</a></p>
</section>
</header>
</body>
</html>