I have a responsive header section but I need to transfer the image from the <img> tag into background-image - is this possible?
Below is the current img tag:
<img src="img/images-header.jpg"
srcset="img/images-header#2x.jpg 2x,
img/images-header#3x.jpg 3x"
class="Images-Header">
And the CSS is
.Images-Header {
width: 320px;
height: 456px;
margin: 60px 0 0;
padding: 105px 29px;
object-fit: contain;
}
Basically, I need to have the image responsive across devices, is it possible to have the srcset into background-image or the same effect?
Many thanks,
No, that's not possible. But you can use media queries to load different versions/sizes of your background-image depending on screen dimensions or other #media parameters like pixel ratio or similar.
Related
I'm trying to make a carousel using CSS, but I want the image to not distort when enlarged and still take up most of the screen. I made a little code showing my problem.
div.some{
width: 1400px;
height: 900px;
background-color: red;
}
img{
width: 100%;
max-height: 500px;
}
HTML
<div class="some">
<img src="IMG_7331.jpg" alt="">
</div>
This is the result:
And this is what happen if i use, background-size, or object-fit.
div.some{
width: 1400px;
height: 900px;
background-color: red;
}
img{
width: 100%;
height: auto;
max-height: 500px;
object-fit: cover;
}
How can you see, the image is cropped, how can I keep the image without distortion, if I modify the height and make it smaller or a maximum, just like the image below.
However I would like to do something like this:
How can I see the image occupies the whole screen and when modifying its height it is not distorted, how can I do this?
You can use the CSS object-fit property. So in your case, the CSS would like this:
img {
width: 100%;
height: 100%;
max-height: 500px;
object-fit: cover;
}
Furthermore you can use the object-position property to specify the alignment of the image. It defaults to the center (50% 50%).
Read more on object-fit and object-postion.
Make sure you use high-resolution asset images for the maximum (wanted) screen size(device-width)
Use css background-size property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
For best practice, add value to thealt attribute
We can implement lazyload into picture element within source tags. But we've got only one img tag and we can load lazyload placeholder image in this img tag's src attribute. So if I want to set seperate lazyload placeholders for each image that is lazyloaded, is there a way to achieve it? I need this because I want to set different picture frames for portable devices and desktops. Let's say one image with a higher height value for portable devices (and will be loaded if the viewport is smaller than 1200px) and the other image with a higher width value for the desktop viewports (1200px or above).
Ex:
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source
data-srcset="640.jpg 640w,
990.jpg 990w,
1024.jpg 1024w"
media="(max-width: 1024px)" />
<source
data-srcset="1200.jpg 1200w" />
<!--[if IE 9]></video><![endif]-->
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="1024.jpg"
class="lazyload"
alt="image with artdirection" />
</picture>
Code is taken from afarkas.github.io
Let's say the image in first source tag has got a width of 640px and a height of 900px and the image in the second source tag's got a size of 1200px width and 900px height. Here I'll need to load different low quality images for portable devices and desktops, but I can set only one img tag, and therefore only one image placeholder in it's src attribute. What can we do to resolve this issue?
Thanks in advance,
Emre
One way to do this is to make the picture element intrinsic and then control the picture element via CSS and media queries.
Like this:
picture.intrinsic {
display: block;
position: relative;
height: 0;
width: 100%;
padding-bottom: 100%; // Default to square
}
picture.intrinsic img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
And then add media-queries to .intrinsic that sets different padding-bottoms.
I am trying to put an image in my header and it must auto position it self when the window is resized and the header image must support different screen resolutions.
This is what I have so far:
HTML
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS
.thumbnail2 {
display: block;
max-width: 123%;
height: auto;
width: auto;
}
header {
padding: 0px 250px 0px;
margin: 0 auto;
}
The reason my max width is 123% is to fit the image when in full screen but as soon I resize the window it does not resize itself and the image becomes smaller in width.
Please assist.
I understand the thought process behind your current code however, you are approaching the issue all wrong. You should be using a css media query to adjust your your header if you are looking for granular control depending on screen size.
Since you only have one image and have not included the dimensions of the image or where it should appear in the header, i will assume you want it to be the entire width of the header.
Additionally max-width should never be over 100%. Here is how I would restructure your code:
Note: if this does not fix your issue, you need to resize your image to be larger. If your image is to small it will not fill up the entire screen.
Codepen link
html:
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS:
.thumbnail {
display:block;
/* set width to 100% */
max-width: 100%;
height: auto;
width: auto;
}
header {
/* padding:0px 250px 0px; */
padding-bottom: 250px;
margin: 0;
/* set width of the header to 100% */
width: 100%
}
Try put the image inside the css (not an img tag)
.thumbnail{
background-image : url(MyImage.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
then it would auto adjust to the container .thumbnail width...
You could use JavaScript to dynamically adjust the image size with
the window size:
Auto image resize based on browser window dimensions
You could use Media Queries and select multiple points at which your header adjusts it's size: Resizing images using media queries
You could instead create a "banner" class that utilizes the "backgrounds" family of CSS properties: http://www.w3schools.com/css/css_background.asp
Try changing your code to something like this:
<style>
.thumbnail2 {
position: relative;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("./path/to/image");
min-height: 100%;
}
</style>
<div class="thumbnail2"></div>
You can edit the height of the image shown with min-height, and the width should be responsive.
I have an image that's 1920 pixel wide. I want it to display centered and cropped in the browser window when it's width is greater than 1024 pixels. When the browser width is less than 1024, the image should be centered and cropped to 1024 pixels and then resized to the browser width.
I can't figure out how to do this, and haven't found any solutions on the internet yet.
Can anyone tell me how to do this, or point me at examples?
I am not exactly sure what are you trying to do, BUT I think what are you looking for is:
max-width
http://www.w3schools.com/cssref/pr_dim_max-width.asp
You can use object-fit property:
.image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
> img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
}
HTML
<div class="image-wrapper">
<img src="" />
</div>
What you are looking for can be achieved using media queries. Following is just an example. Hope you can proceed with that.
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Here background color will be changed when you resize the browser and browser width is less than 480px.
I'm stuck on something that should be very simple. I have a page that uses Semantic UI. On that page I have a logo image that is 200px wide by 388px high. The image is positioned absolutely, top left. It does not use any Semantic UI class. I want the image to shrink adaptively to the screen size. I have played about with min and max heights and widths, but the image will not change size at all.
The only way I got it to almost work was to replace the image with a div and set the image as a background. I got that adapting, but I couldn't maintain aspect ratio, and besides, that's not a satisfactory solution.
Here's an example of what I have;
<div class="ui inverted menu">....</div>
<img src="/img.png" class="logo">
<div class="ui page grid">.....</div>
/* css (separate file) */
.logo{
position: absolute;
top: 4px;
left: 6px;
z-index: 2;
min-height: 100px;
max-height: 388px;
width: auto;
}
This is just one of many variants I have tried and I have run out of ideas!
The best solution will be to put the image as a background-image and than set the background-size to cover.
.logo {
background-image: url(path/to/your/image.jpg);
background-size: cover;
}
This way, you'll maintain aspect ratio.
If you don't want parts of your image to be cut off, you can use background-size: contain; instead.
There is an object-fit/object-position method for your problem.
To keep aspect ratio for an img block just use:
object-fit: contain;
For placing img top left:
object-position: 0 0;
Don't forget to stretch image to 100% width and height:
width: 100%;
height: 100%;
Check out fiddle to play with it.
Please notice that this variant is not the best for cross-browser using, since there is no support for object-fit/object-position properties in IE 6-11, Edge and some Mobile Android browsers according to caniuse.
As Simon said before, I'd reccomend you using background-image for cases like this too.