0

I want to make an image good for a responsive layout. I am using an large .svg image at the moment which resizes to any and still looks sharp.

However, when I put the image in a div it is sometime too big or small. I just want it to fill the screen properly.

So far I have coded:

img{display:block;}

but am sure theres more to it...Anyone?

Transformer
  • 41
  • 1
  • 7

1 Answers1

0

To make your image change size dynamically (and stay within your div), give it a max width and set the height to auto.

.imgcontain {
  max-width: 50%;
}

img {
  max-width: 100%;
  height: auto;
}
<div class=imgcontain>
  <img src="https://images.unsplash.com/photo-1542044896530-05d85be9b11a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
</div>
jjsecord
  • 114
  • 5
  • @Transformer - No problem. Glad to hear! – jjsecord Oct 17 '19 at 04:04
  • Hang on...I created a container with a 1px black border...put the tags inside the container...tried centering another image using margin-left, margin-right: auto but the image goes over the border line (it doesn't resize). What am I doing wrong...and how did it work for the .svg file and not the .jpg file? – Transformer Oct 17 '19 at 10:47
  • @Transformer - I can't be exactly sure without looking at your markup, but it sounds like you're trying to center it and keep it within a parent container that is not responsive. Also, for auto margin centering to work, you'll have to re-add `display: block;`. My apologies for omitting that. Here is an example: https://jsfiddle.net/jjsecord/sp205xft/6/ – jjsecord Oct 17 '19 at 12:36
  • Tried this: .main-sub{max-width:550px; border: 1px solid white;}.img{max-width: 50%;height:auto; display:block; margin: 0 auto;}....didnt work – Transformer Oct 17 '19 at 14:10
  • @Transformer - Can you link a live example of your code please? – jjsecord Oct 17 '19 at 14:15
  • https://jsfiddle.net/hm087ster/9vxdjo5m/4/ (Edit: realised the mistake...had .img{} instead of img{}) – Transformer Oct 17 '19 at 14:23
  • @Transformer - Great. Pesky mistakes like that are seriously the worst. Hours of time to find a simple period..*facepalm*. I read that code like three times and still didn't catch it! Hahah. Be sure to mark the answer correct for others searching. – jjsecord Oct 17 '19 at 14:45
  • in addition, if I want to "crop" a photo from the top a bit (just a few pixels) how would I do this with css? (max-height: 99%; overflow:hidden; is not the way I assume). – Transformer Oct 17 '19 at 17:05
  • @Transformer - If I understand correctly, just add `padding-top:3px;` to `img{}`. – jjsecord Oct 17 '19 at 17:08
  • I want to crop it...(thats a challenge) – Transformer Oct 17 '19 at 17:09
  • Is object-fit the only answer?? – Transformer Oct 17 '19 at 18:19
  • @Transformer - If you position the image using `position: absolute;` or `position:fixed`, I suppose you can play around with the clip property. I recommend just cropping your image before uploading it to your site though. – jjsecord Oct 17 '19 at 19:17