Div.

 
Helphinstine: Noobiwan: but it works when you change another property of it?

Novik: Hashtag_, when I change any value programatically the event is triggered, but if the element style changes because of a window resize for instance, then no event is fired

Lashbaugh: Hm, makes sense, it isn’t really changed in terms of properties

Sudler: But you could hook on window.resize event then

Lockemer: If I change the style of an element with element.style.width, it fires it event.

Pounder: Hashtag_, yeah, that could be an option but it wouldn’t be contained to the component itself.

Oberman: Hm, I saw a library that offers watching for element changes and such, maybe it does more than just using mutationobserver for it

Raycraft: Hashtag_, I will take a look, I think I say something but I was just wondering if the MutationObserver should be able to do this or not. It’s my first time using it.

Geringer: Hi, I’m trying to do something similar to img src=””/, but in CSS, and possibly with a Div or something. I need the div to scale according to the image’s ratio, just like the img tag does it.

Bushweller: Acerspyro, you are not using the img tag at all? are you using background images?

Plaut: Noobiwan, I could, but that doesn’t scale the div according to the image, and the image will always be max-size rather than fitting the div’s parent.

Laday: Acerspyro, what you could do is put a img with width: 100% inside the div

Ector: I need to change the image source via js

Nettik: Acerspyro, so if you change the div you change the img

Goffney: Acerspyro, if you set the div to width: 300px; height: auto; it will keep the aspect ration

Brantley: Try this div style=”width: 300px; height: auto”img src=”.” style=”width: 100%; height: auto”/div

Lubbert: I have that right now

Matusik: But I need to change the img src via CSS/JS

Dellaripa: Acerspyro, so what’s the problem?

Guyott: Well the img src cannot be changed via css

Santigo: Hence cannot be animated

Hoggins: And I can’t use overlapping images, they are semi-transparent.

Su: Oh, you don’t want javascript

Turkel: Well, as far as I know you will need javascript

Wingerd: Because a div can’t adjust itself based on a background-image size

Daugherty: Ok so just replacing the content of the div?

Swantek: Do***ent.getElementById”myImg”.src=”new-source.png”;

Lichty: But I would still like to use a smooth css transition on hover for another use case on my page

Mcgoon: It’s a CSS slideshow in a div, and the back and forward buttons need to change smoothly when you hover them

Deike: Acerspyro, can’t you use SVG?

Dolce: I’m using svg graphics for the next and prev buttons

Pitpitan: Am I using it wrong, using an svg in an img tag?

Cella: You don’t need to use SVG in an img tag

Duffee: You lose functionality

Delsol: I don’t know much about SVG, but I think you could create an SVG that animates based on mouseover

Siad: I’ll check that out, didn’t know

Meecham: Hey im trying to make the first imagecontainer transparent http://bit.ly/1VaSGeP

Carroca: What does this = mean in this query? .responsive-imagemax-width=’400px’

Kallfelz: Noobiwan: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Allemond: Basically means “begins with”

Murakami: Yes, but begin with “400px” ? doesn’t make sense to me

Liesman: So what does it mean a max-width that starts with “400px” ?

Karwoski: Well it’s an attribute selector

Dortch: So someone has used a custom attribute in their html not valid html

Manier: Div cl***=”responsive-image” max-width=”400px”