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>
Related
Code sandbox:
https://codesandbox.io/s/polished-browser-d5qrr?file=/index.html:0-1902&fbclid=IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH-4UB8QIbPdb_hZKL1G0
How to fill image to 100% height of the parent div? Ratio width: height should stay the same.
Here is a possible solution for your question I hope it can help
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<style>
html,
body {
height: 100%;
}
.custom-container {
position: relative;
max-width: 800px;
max-height: 400px;
width: 70%;
height: 60%;
border: 2px solid red;
}
.mid {
border: 2px solid green;
}
.flex-grow-1 {
position: relative;
min-height: 100px;
max-height: 100%;
}
.img-container {
position: relative;
height: 100%;
}
.flex-grow-1,
.img-container,
img {
width: 100%;
max-height: 300px;
object-fit: cover;
}
div>img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1">
<div class="img-container">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1"
alt="img" />
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
You want the img to fill the height of its container which has class .img-container.
At the moment you have set the width and height of the img element to 100px. This gives a small image and one that may be distorted if the original is not square.
To make the image fill the full height but keep its original aspect ratio replace the .img-container img CSS settings with:
.img-container img {
height: 100%;
width: auto;
}
This may not be what you want if some of your images are more landscape than portrait for example. Depending on the image aspect ratios compared to the container's you may get the image cut off at the sides.
If you want to ensure that you always show exactly the whole image then investigate object-fit: contain This may give you white space either top and bottom or at the sides if the ratios don't match.
If you want to always fill the container, but without image distorion then investigate object-fit: cover. This will cut off top and bottom or the sides if it has to. You will need also to look at positioning, often center will do what is needed but may not work for all your images.
This is correct answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
html,body{
height: 100%;
}
.custom-container{
max-width:800px;
max-height:400px;
width:70%;
height:60%;
border: 2px solid red;
}
.mid{
border:2px solid green;
min-height:0;
}
img{
max-height:100%;
max-width: 100%;;
}
#problem{
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1 d-flex">
<div id="problem" class="w-100" >
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1" alt="img">
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
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>
Im trying to create a backround for the main section of my page. The size of the image is 640 x 480 and I want it to be the background for a container that is 1204 x 184. I know this question been asked before but none of the answers worked for me.
Question: How do I make the image to cover the size of the div while also keeping the aspect ratio so that i can still see the image in its entirety?.
p.s I added a my code but I do not have enough points yet to add pictures to my post.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-container{
width: 98%;
margin: auto;
background: lightgray;
}
header{
width:80%;
height: 10%;
background: grey;
margin: auto
}
main{
margin-top: 0px;
width: 80%;
height:600px;
margin: auto;
margin-top: 10px;
background: url(https://placeimg.com/640/480/tech);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
<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">
<link rel="stylesheet" href="main.css">
<title>Layout practice</title>
</head>
<body>
<div class="main-container">
<header>
<div class="main-header">
<h1>Header</h1>
</div>
</header>
<main>
<!-- <div class="main-content">
-->
</main>
<section class="lower-sec">
<div class="left-box">
</div>
<div class="right-box">
</div>
</section>
</div>
</body>
</html>
Instead of background-size: 100% use
background-size: contain;
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Hello apologies for what may come across as a silly question as I am still fairly new to HTML & CSS. I want to avoid using Javascript if possible to solve this solution.
My issue is the text "Still working on it". On the various laptops / desktop screens and android phones tested I've had no issue with it the entire text field being centered. However on iphones I am assuming that it centers the first letter of the string "S"? Below is an example of what it looks like on iphone devices:
Below is my HTML and CSS code respectively, if anyone could guide me in the right direction to sorting this issue I would very much appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>Elias Malik</title>
<link rel="stylesheet" href="main.css">
<link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<link rel="shortcut icon" href="diamond.ico">
</head>
<body>
<div class="bc">
<h1>Still working on it</h1>
</div>
<footer class="mainFooter">
<div class="socialmediaFooter">
<img class="focus" src="facebook.png"</img>
<img class="focus" src="instagram.png"</img>
<img class="focus" src="linkedin.png"</img>
</div>
</footer>
</body>
</html>
and
html
{
background: url("devbc.jpg") no-repeat center center;
min-height:100%;
background-size:cover;
}
body
{
text-align: center;
min-height:100%;
}
.bc h1
{
text-align: center;
font-family: "Damion", cursive;
color: white;
font-size: 4.6vmax;
position: fixed;
top: 42%;
left: 51%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.mainFooter{
width: 100%;
margin: center;
margin: auto;
position: fixed;
bottom: 0;
font-size: 5px;
float: center;
}
img
{
max-height: 10vmax;
max-width: 5vmax;
}
The website is:
https://eliasmalik.com
I'm not sure if it will fix it on your phone, but try to take out the left:51% and your transform property on your .bc h1 css and instead add a width:100%
My result: http://i.imgur.com/P50RS.png
My style.css
body {
background: url("img/bgs.png") repeat #cccccc;
color: #000000;
}
main {
margin-left: auto;
margin-right: auto;
}
My index.html
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" href="css3-progress-bar.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p><b>215/160 LBS.</b></p>
<div class="bar_mortice rounded green_mortice">
<div class="progress rounded green" style="width: 05%;"></div>
</div>
</div>
</body>
</html>
Why is the text not centering? Also, the progress bar was not centering until I added the
margin: 0 auto;
I tried that under main but no luck. Any ideas?
In the css, you need to use #main instead of just main.
Also, you'll want to give it some width, otherwise it may take up the entire width. Try this:
#main {
margin-left: auto;
margin-right: auto;
width: 50%;
}