I have an example (with the help from #bjb568) here. Please click it to see how it works in Chrome/IE/FF.
http://jsfiddle.net/P92Fs/11/
Here is all code.
<div style="text-align:center">
<div class="media">
<img src="http://www.trumba.com/i/DgCAOmnZFp7ia4FDZJne5SHC.gif" />
<div class="caption">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
</div>
</div>
</div>
.media {
position: relative;
display: inline-block;
}
.media .caption {
position: absolute;
bottom: 0;
text-align: left;
}
img {
max-width: 100%;
}
In Chrome (Windows), the image shrinks accordingly when the browser's viewport is narrower than the image width. This is what I want.
However, it does not shrink accordingly in IE (v10, Windows) and Firefox (v26, Windows).
Does anyone know why and the fix?
Thanks!
For img, change max-width to width in your CSS.
Here's a fiddle.
Max-width just sets the maximum width, not the actual width.
Do you have this line in the head section of your html document?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
It's a little hard to troubleshoot without seeing the whole html document.
Related
I want to size the background images places on their position. It is possible?
I've tried but it's not working actually.
header {
background: #fff8f3;
padding: 0 200px;
background-image: url('../images/header_bg.png'), url('../images/developer.png');
background-repeat: no-repeat;
background-position: bottom right, left;
background-size: 50%;
}
Please try like this, hope it will work.
header {
background: #fff8f3;
padding: 0 200px;
background-image: url('../images/header_bg.png') bottom right no-repeat, url('../images/developer.png') left no-repeat;
background-size: 50%, 50%;
}
Yes it's possible, you will get the details here.
https://www.w3schools.com/css/css3_backgrounds.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
You can see this pen also
https://codepen.io/salmanaabir/pen/zYLQwXE
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(https://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(https://www.w3schools.com/css/paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
I would like to have an element superimposed on an image, which should responsively adjust to the element's dimensions.
In the example below, the goal is to have img completely surround the sibling element. Right now, it only partially covers it:
section {
position: relative;
}
img {
width: 100%;
height: 100%;
}
div {
padding: 30px;
margin: 30px;
position: absolute;
top: 0;
background: red;
opacity: 50%;
}
<section>
<img src="https://via.placeholder.com/1000x100">
<div>
Content Goes here
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</section>
I tried adding background-image to section, but that doesn't seem to work either. Right now my only option is to use media queries and manually adjust the height of img, but I was curious if there is a cleaner approach.
You could set the image as a background of the section. Please note, that I removed the position absolute of the div element so the section can growth with that element. You can play around with the different background options till you get your desired result.
section {
position: relative;
background-image: url("https://via.placeholder.com/1000x100");
background-position: center;
background-size: 100% 100%;
padding: 15px; /* optional padding */
}
div {
padding: 30px;
top: 0;
background: red;
opacity: 50%;
}
<section>
<div>
Content Goes here
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</section>
Why not use transform on the div?
section {
position: relative;
}
img {
width: 100%;
display: block;
max-width: 100%;
}
div {
padding: 30px;
margin: 0 30px;
top: 0;
background: red;
opacity: 50%;
position: relative;
transform: translateY(-25px);
}
<section>
<img src="https://via.placeholder.com/1000x100">
<div>
Content Goes here
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</section>
may be you can do it in this way, i feel like usually child element work or inherit the properties of the parent. even in the case of relative and absolute parent child relation, child element stays with the parent even though wherever the parent goes/moves
so, if you want a background image to be superimposed on some element, first of all, may be you have to set the parent element/background image's properties properly and then keep your content inside. if your content is overflowing/larger than background you might have to adjust it manually ( like you said, with media queries ) or you can try in this way.
<!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>
<style>
.image-back {
padding: 30px;
margin: 30px;
width: 100%;
height: auto;
background-image: url('https://via.placeholder.com/1000x100');
}
.content {
background-color: red;
opacity: 50%;
overflow: hidden;
}
</style>
</head>
<body>
<header>
<div class="image-back">
<div class="content">
<p>Content Goes here</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</header>
</body>
</html>
here in this case, try to get an image that can contain the size of inner element and its border+padding+etc. and have a look at how it behaves with different screen resolutions.
I am working on a simple css grid resizing of an image that scales down and up when the viewport size changes. In my example the image is in the left most grid cell with text in the adjacent cell just to it's right. Interestingly the resize behavior seems to be impacted differently depending on whether or not your using chrome or firefox. In chrome, when the text pushes the bottom cell boundary past the image height the image height is changed to match thus increasing the size of the image and causing it to scale incorrectly. Whereas in firefox the image height doesn't seem to be impacted and continues to scale down correctly. What thoughts do you have about how to solve this or is this a bug in either the firefox or chrome implementation of the css grid spec? Would love some thoughts either way on how to make both browsers behave consistently here.
Here is an example I threw together on codepen that shows what I'm talking about. Just push your right browser edge to the point that the text exceeds the height of the image height and the behavior I've described becomes obvious.
https://codepen.io/bradnjones/full/WyyOyY
Here's the HTML:
<html dir="ltr" lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS GRID Firefox / Chrome behave differently</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<img class="image" src="https://drive.google.com /uc?export=view&id=1QCw6g_h8WNfqSH_5iapODpuxNn7uciQB" alt="">
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</span>
</div>
</body>
</html>
Here's the CSS:
.container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
}
.image {
grid-column: 1/2;
grid-row: 1/2;
object-fit: contain;
align-self: start;
width: 100%;
max-height: 100%;
}
.text {
grid-column: 2/3;
grid-row: 1/2;
}
I just figured it out. It wasn't the Grid but the image css fit and alignment properties within the grid. When I changed object-fit from "cover" to "contain" and added align-self: start, chrome behaves the same as Firefox. See updates to codepen and original post for correct code.
i am making a card with material components for web and i want to have my template layout to have all its data inside it.
Now when i am using mdc-card__title or subtitle , both of them are getting aligned to the bottom of the card which i don not want.
Is there anything wrong i am doing ?
See the code for help :
.demo-card{
width:65%; max-height: 500px;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet"
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<div class="mdc-card demo-card">
<section class="mdc-card__primary">
<h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
<h2 class="mdc-card__subtitle">Subtitle here</h2>
</section>
<section class="mdc-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
</section>
</div>
</body>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>mdc.autoInit()</script>
</html>
Why is it leaving a space for media even when i am not adding any media content.
This seems to be by design, according to the docs:
Content will be bottom-aligned if it's smaller than the height of the card.
It should be possible to override .mdc-card's justify-content style to flex-start if you want to change this to top-aligned instead.
I have two divs that I want to position side-by-side. One contains an image, one contains text.
Because the height of the text div will change depending on the width of the browser, I would like to use flexbox and background-size: cover to ensure the image is always the same height as the text div next to it.
I have managed to successfully do this in Chrome, Safari and Firefox in the following manner:
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.your-perfect-colours .content .image{
background-image: url(/images/your-perfect-colours.jpg);
background-size: cover;
width: 62%;
}
.your-perfect-colours .text{
order: 1;
width: 38%;
}
<div class="your-perfect-colours">
<div class="content flexbox-container">
<div class="text">
<h2>Your Perfect Colours</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula orci, varius in vulputate eu, lobortis a magna. Nunc a lectus ipsum. In hac habitasse platea dictumst. Donec pulvinar velit purus, vel consectetur risus laoreet a. Aliquam erat volutpat. Morbi quis efficitur arcu, et pharetra massa. Nullam sed diam purus.</p>
<button>Find out more</button>
</div>
<div class="image">
</div>
</div>
</div>
This results in the following in the browser:
When the browser is resized, the image correctly adjusts its position to cover the size of the div.
However, I have used Browserstack to show me a screenshot from Internet Explorer and it's not loading the image:
Am I missing something obvious or is this an IE quirk? The fact this works in three other browsers seems to point the finger at IE, but I'd like to get some input on this to see if I can get this working.
Thanks.