Recently there was an order to make up a site where the heroes of the magazine were placed on the main page. And these characters are the navigation menu. Accordingly, cut the picture and drove it into the link as follows:

<a href="#"><img src="img/picture.jpg" /></a>

Everything is aligned, as it is supposed to. I made a sticky footer and if the screen height is not less than 800 pixels, then the scaling happens with a bang, but go to the laptop with a diagonal of 15. Appears scrolling-decided to reduce the pictures and load them through CSS3

 @media all and (max-width: 800px)

and there must be another style for this permission.

Question : how can I be in CSS <img> bend another image, the one that is smaller scale? (it seems this adaptive layout is called)

  • Tried to read about the adaptive layout on the Internet? - Zhukov Roman
  • of course, and where I use it. I have a specific question because ... as in the <img> tag, drive another image through CSS if the screen height is less than 800 pixels! No scripts! - nosensus
  • The bootstrap manual has everything you need to understand this issue. twitter.github.com/bootstrap/scaffolding.html#responsive - Viacheslav Soldatov
  • > there was an order. Well, and make it an order. Or pay for work. - user6550
  • and what if all the "heroes" are placed in divs .horovodov {width: 300px; height: 500px; float: left; background: url ('images / norm.png'); } further @media all and (max-width: 800px) {.horovodov {width: 150px; height: 250px; background: url ('images / small.png'); }} - Cone

4 answers 4

Yeah, yes, yes:

Applies to :: before and :: afterpseudo-elements

This is how it works everywhere (ie 9+, ff 19, chrome 25)

 <style> .adaptive-image:after { content: url('image-def.jpg'); } @media screen and (min-width: 800px) { .adaptive-image:after { content: url('image-800.jpg'); } } @media screen and (min-width: 1024px) { .adaptive-image:after { content: url('image-1024.jpg'); } } </style> <div class="adaptive-image"></div>

But then it's better to set the background .

  • the fact that you can replace the background itself is not a problem and it works. but as I understood it by Google yesterday, that the very tag IMG SRC replace it without a script is simply not possible. We'll have to redo the link on the background, and remove the IMG tag. - nosensus
  • I am even happy about this, for CSS is a style sheet . As for me, even pseudo-elements: after and: before are already somewhat beyond the scope of the task assigned to CSS, which only causes confusion. - Bars

Try this:

HTML

 <a href="#"><img id="adaptive" src="img/picture.jpg" /></a>

CSS

 #adaptive{ content:url("img/small_picture.jpg"); }

Read more

  • Well, thanks, I'll try the result later.) - nosensus
  • No, unfortunately it did not work out. - nosensus

Use HTMLscale and all pictures and text on the site will adjust to the width of the screen link text

    No need to shove a picture with a tag, so difficult to manage it. Create a block and set a picture. background-size: cover; try for such a block. You can also try the property with the background-size, on it the background-repeat is not used everywhere.

      Protected by a community spirit ♦ 10 Dec '16 at 5:28 .

      Thank you for your interest in this issue. Since he collected a large number of low-quality and spam responses, which had to be deleted, now it’s necessary to have 10 reputation points on the site (the bonus for account association is not counted ).

      Maybe you want to answer one of the unanswered questions ?