I have a div that has a certain fixed width and height. I want to fit inside an image (it's dimensions are previously unknown) without stretching it (keep aspect ratio). Object fit would work but for the sake of image being wrapped inside of another wrapper div (to apply shadow), so it cannot be used this time.
To make it clear: I can't use object-fit, nor making it a background image.
How is this done properly with CSS?
further images to demonstrate my intentions: (blue rectangle on the right represents the original image in its original size, on the left it is how it should display inside it's dashed parent)
If i understood correctly this should do it
object-fit: contain;
.section{
height:90vh;
width:100%;
border: 2px solid black;
}
.img{
height:100%;
width:100%;
background-image: url('https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1239&q=80');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
<!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>Document</title>
</head>
<body>
<div class="main">
<div class="section">
<div class="img"></div>
</div>
</div>
</body>
</html>
you can resize the browser and the aspect ration wont change, I hope this is what you are looking for
Related
In my css file, I have an id named "homehero", which displays a background image.
#homehero
{
background-image: url("images/coast.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
In my html file, I have a div that uses this id to display the image; however, the image does not appear whatsoever.
<div id="homehero"> <!-- Home Page Image -->
<!-- <img src="images/coast.jpg" width="100%" height="100%" alt="A Sunny Coastline"> -->
<!-- Old line of html that displayed the same image, but converted to css id. -->
</div> <!-- End of Home Page Image -->
The full html file can be found here.
The full css file can be found here.
Edit:
The image is displayed when setting it as the background image for another element, it is only in this id where the issue occurs.
Please Put width and height
width:100%;
height:100vh;
#homehero
{
background-image: url("images/coast.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
height:100vh;
}
I would suggest below changes,
#homehero
{
background-image: url("images/coast.jpg");
width:300px;
height:300px;
background-size: cover;
background-repeat: no-repeat;
}
Where, your image will be cover and if you specifies width and height it would be good and also your image will not be repeat as no-repeat property is used.
These are a few things I recommend you try:
Try setting the background size. (Instead of %, try setting it to px.)
Most of the time, the background picture is applied, but because our div has
no dimension, we are unable to view it.
Double-check that your picture file is located in the images folder.
Check your image's extension and make sure you're using the correct one in your code.
Use the dev tools to inspect the element and see whether the background property is being overridden by another CSS rule.
If none of the above methods work, try pasting the picture's real URL by copying the image address from the internet rather than providing a folder path.
This method works 90% of the time.
i recommend to use inline scope css, i hope it works for you
<!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>Document</title>
<link rel="stylesheet" href="#homehero {.css">
<style>
#homehero {
background-image: url("image/image.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<div id="homehero">
</div>
</div>
</body>
</html>
this might be the reason why it can happen
https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/#:~:text=As%20Inline%20has%20the%20highest,sheets%20have%20the%20least%20priority.
It looks like you're entering the url in the background image, for background size using background-size: cover;
If your url address is correct, then try adding
width:100%;
height:100vh;
This is what is happening with the code.
Here is the code...
<div style="background-image: url(img/background.jpg);background-repeat: no-repeat; height:250px;"></div>
The size of the image is 963w x 200h.
At the end of the day, i would want this to be 100% width, but also be responsive for all devices. How can I make that happen?
adding background-size:cover; wont do that trick.
Here is a fiddle: https://jsfiddle.net/t7ekj0mh/
Add the rule background-size: contain to your div.
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<body>
<div style="background-image: url(https://i.ibb.co/2jCzQB6/background2.jpg);background-repeat: no-repeat; background-size: contain; height:250px;"></div>
</body>
</html>
Add background size contain for the image to scale horizontally
As I understand, this is what you are attempting to achieve.
div{
background: #E6DCDD url(https://i.ibb.co/2jCzQB6/background2.jpg) center bottom / contain no-repeat;
height: 300px;
border: 5px dashed red;
}
<div></div>
This will stretch the image horizontally and place it at the bottom, and by adding a color, it will seem as it is a one-piece thing.
guys I am new to front end development and I am trying to learn from building a page.
Here is the demo.
https://codesandbox.io/s/goofy-boyd-xscgd
it looks fine on full-screen but when I narrow the viewport. The picture seems to be getting far away from the text and the gap between them are getting bigger as the picture shows.
The effect I wanted to achieve is that when I narrow the browser the picture would get closer to the text(and there would be overlap between them). When it is viewed on phone, the picture will become the background picture of the screen. like this
Can someone please help me with this?
Set the image element to
position: absolute;
right: 0;
in the CSS file. That should work.
Well, You can do this with CSS media query. Here is a sample, I hope you can tweak around and make it work for you.
HTML
<!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></title>
</head>
<body>
<div id="main">
<div id="txt">
<h1>Your Text</h1>
</div>
<div id="pic">
<img src="https://via.placeholder.com/500">
</div>
</div>
</body>
</html>
CSS
#main{
width:100%;
}
#txt{
width:50%;
display: inline-block;
}
#pic{
width:48%;
display: inline-block;
}
#media (max-width: 500px) {
#pic{
display: none;
}
#main{
background: url("https://via.placeholder.com/500");
background-size: cover;
}
#txt{
width:100%;
text-align: center;
}
}
Reduce your browser's size to smaller than 500px and refresh, you will see the change. If you want to do this in more dynamic way, you have to use javascript/jquery.
I have these two PNG images (Image 1: eyemasktrans , Image 2:dialogue_ughhh) which I already edited in Photoshop to make them transparent. But the problem is when I try to view on Chrome, the supposed transparent images appeared to have white backgrounds. Is they any way to fix this using just HTML? Thanks in advance! Below is my current code:
Other image I use: girl_sleeping
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("girl_sleeping.jpg");
/* Set a specific height */
min-height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<center> <img src="eyemasktrans.png" /> </center>
<center> <img src="dialogue_ughhh.png" /> </center>
<div class="parallax"></div>
</body>
</html>
Your eyemasktrans.png and your dialogue_ughhh.png images are fine. They have a proper alpha channel in the PNG.
I think the issue you're having is that the .parallax div is not sized corectly, and also has some weird background configurations with fixed and center, which cause it to appear like something is covering it while you scroll around the page.
I don't know what the desired effect is here, but if you size things correctly and set z-index as appropriate, you won't have a problem.
Additionally, I would suggest considering SVG for this task, since all your art is vector anyway. You'll have a much faster load time.
(Issue is reproduced here: http://jsfiddle.net/vr1qms9h/1/)
You can use the opacity attribute.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("http://thepotatoplace.ga/images/background.png");
/* Set a specific height */
min-height: 200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.65;
}
</style>
</head>
<body>
<center> <img src="eyemasktrans.png" /> </center>
<center> <img src="dialogue_ughhh.png" /> </center>
<div class="parallax"></div>
</body>
</html>
html ,body {
height:100%;
width:100%;
margin:0px;
}
h1 {
margin:50px;
}
.jumbotron {
height:100%;
background-image: url("http://www.zoophotels.com/wp-content/uploads/2015/02/cpt-new.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="jumbotron">
<h1>Welcome</h1>
</div>
</body>
</html>
I don't know what's wrong, but it seems like when i change background-size value to cover, the background doesn't scale based on my browser size, but when i set the value to 100% 100%, it scales like i expect.
So, how to keep the value of cover and let jumbotron class do the right scale (in this case keep the value of background size (cover), while the size when jumbotron do scaling still cover)
Additional Info:
i want the result to be
1.The image cover to be like 100% 100% (fit to screen)
2.When i resizing my browser window, i want the image ratio still same like 1 step
check this web: http://www.qerja.com/
i want the jumbotron looks like this website jumbotron, resize the image width when i resizing the browser windows
Cover is working as expected. The image maintain's it's aspect ratio as it scales in relation to your browser window. Unlike applying 100% 100%.
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
CSS3 background-size Property