Img src VS CSS Background Image No Intrinsic Dimensions - html

I've got a markdown with HTML built inside and I need to change the following:
<img src="..." />
Into
<img class="image" /> // Could also be a div, doesn't matter
And give it a background-image CSS style instead (this is due to webpack bundling and the fact I have no imports and variables in .md files)
Problem is that the first option loads the image properly without having to specify height/width, and the 2nd approach shows nothing unless I specify height/width.
Fiddle demonstrating issue
Why is this, and is there a way to bypass this without specifying height/width for every such occurence?

The best you can do is calculate the proportion of the img and then use the value for padding and cover to fit that:
As an example if the image is 1:1 proportion:
.image {
background-image: url('http://i.imgur.com/3Zh2iqf.jpg');
background-repeat: no-repeat;
background-size:cover;
padding-top:100%;
}
<div>
<div class="image">
</div>
</div>

Related

Fill a div with an image (object-fit question)

I have images that are dynamically pulled and cannot be certain of the image size or ratio of the image.
Using bootstrap4 (and wordpress) i'm trying to scale the image so that it fills the width and height of the div, and if possible maintain the aspect ratio (its ok if the image gets portions cutoff).
My image is currently breaking the height of the div and the image will size outside of the div.
.blog-home {
max-width: 570px;
max-height: 225px;
}
.blog-home img {
object-fit: cover;
max-height: 210px;
}
img {
max-width: 100%;
height: auto;
}
<div class="row article">
<div class="col-md-6 blog-home">
<picture width="778" height="312" class="attachment-large size-large wp-post-image">
<source type="image/webp" srcset="..." sizes="(max-width: 778px) 100vw, 778px">
<img src="..." sizes="(max-width: 778px) 100vw, 778px">
</picture>
</div>
<div class="col-md-6">
....
</div>
</div>
My tags are dynamically replaced with tags. I can't sort out how to fix this without breaking the responsive-ness of the layout.
Then I would suggest that you use background-size: cover. Here is the definition according to https://www.w3schools.com/cssref/css3_pr_background-size.asp.
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
Use Cover to resize the background image to cover the entire container.
Here is an example link:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
The best solution would be to cut or crop the images somewhere in the wordpress, here is a good read on why and how it can be achieved. In case your images are already in the Media Library - use Regenerate Thumbnails plugin to fix all of them in one click.
I think there are a lot of styles involved in the case, so it won't be so easy to get which exact part of it breaks the output without inspecting the full source, however in the worst case you could add .blog-home {overflow:hidden} to cut all what goes outside the div.

CSS is not loading a local image?

I am trying to show image from my PC in my website using html file using css. The css, the image, and the html file are in the same directory the image is shown inside the web browser inspector as shown but not showing in the page it self Inspected Element
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo"></div>
The div has no height — there is no explicit height in CSS and there is no content in normal flow to give it a height from the height: auto it gets by default.
Since it has no height, it is 0 pixels tall. Multiply the height by the width and you get a box that is 0 square pixels.
With a canvas size of 0, there is no space to display the image on.
Do something to give it a height.
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo">
Here is some content.
</div>
That said, a logo is something that conveys information. It isn't decorative. You should express it with HTML not CSS, and include alt text.
<div class="logo">
<img src="https://placekitten.com/100/100" alt="Kitten Inc.">
</div>
The "logo" class must have a height in order to show its contents, you have several ways to set up the height:
01
inside your css, go to '.login' and between{ } write : height:100px;
result
.logo{
height:100px
}
02
Inline like this
<div class="logo" style="height:100px"></div>
03
Using jQuery, like this
$('.logo').height(100);
or
$('.logo').css('height','100px');

What are important factors when implementing second images on hover?

I'm implementing a second image on hover in a list. This is very common for example in list views of products. I have two ideas for how to do this:
Either put two images on top of each other like this
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
Then hide one image and when hovering the wrapper I will show it with css.
Or I would make one div:
<div class="container" />
and then use inline css to set the background images on .container.
I could also do something with javascript of course.
How, if at all, would these solutions affect performance on hover and page-loading time? Is there an even better solution? The site is built in react.
Since you are using react, you could simply manage the visibility of that second image via the state.
But if you only have two images and don't need any kind of cycling of images, using css should be the solution with the best performance.
Use your current setup like this:
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
And put the first image ontop of the second one. Then just hide the first element on hover.
The only impact this has on performance/loading time is, that you would fetch two images per item on page load.
Using react instead, the second image would not be loaded until you render it into the DOM (But if the image takes some time to load, it wont look that smooth).
However, native css transitions are much more efficient than solving this with react. At least for this small usecase.
If you however want to solve it with react, I would suggest trying your backgroundImage approach. Just keep track of the hover state in your component and switch the background image accordingly.
I think, the easiest way would be:
.sample {
background: url(http://placehold.it/200?text=First) center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover {
background-image: url(http://placehold.it/200?text=Second);
}
<div class="sample"></div>
And with image paths inlined:
.sample {
background: url() center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover img {
opacity: 0;
}
<div class="sample" style="background-image: url('http://placehold.it/200?text=Second')">
<img src="http://placehold.it/200?text=First" />
</div>

HTML Background Auto-Resizing

I am attempting to set an image as the background and have it auto-resize and auto-center when the window changes size. Right now I have the auto-resize and auto-center working perfect, but I have no clue how to make it my background image. I had to replace all opening and closing symbols with the PLUS (+) symbol. My current code is as follows:
<div style="text-align: center;">
<img src="amazing.jpg" style="max-width: 100%; height: auto;" alt="Epoxy Flooring of NY" />
</div>
Any suggestions to make it the background instead of just a picture taking up the whole screen? I need the words on top of it, not under it.
Welcome to the stackoverflow-community :)
Just use the background-image-property instead of an <img>-tag.
<div style="background-image:url('amazing.jpg')">
<!-- your text here -->
</div>
For more information See here and here.
Note:
If you use background-image instead of <img> you will not see anything unless you give the <div> a height, by either filling it with text or/and setting it's height of, for example, 100px.
There is two ways to do it one using the css background img property and the other using the HTML img tag.
https://jsfiddle.net/pdhgLap8/
Basically what you need to add to use background images is
background-image: url("https://i.imgur.com/SebQr4d.jpg");
background-size: contain;
background-repeat: no-repeat;
This will set the background image
make it so it is only as large as the div it is in
and make it so it doesn't repeat to fill the div

How to pull IMG SRC from one HTML tag into another?

I'm working on a school project and I'm wondering if this is possible:
In one div, I've defined an <img>, which will display.
In the second div, I want the img src to come from the first div.
Is it possible to do this? Preferably without anything besides css/html.
If you don't mind a little JS you can do it inline in your HTML. E.g.
<img id="img1" src="http://cdn.obsidianportal.com/assets/50953/serenity19dc.png" />
<img id="img2" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="this.src=document.getElementById('img1').src" />
Here the second image has intially just a placeholder image (1x1 gif) but on load it is replaced by SRC from the first image.
You need JavaScript to copy the src attribute, but you can have two images while defining the URL in one place by defining a background image in CSS:
.is-image {
background: url('http://www.google.com/images/srpr/logo11w.png') no-repeat;
width: 538px;
height: 190px;
}
<div class="is-image"></div>
<div class="is-image"></div>