0

Sorry if this is a bit confusing but I will try to explain. To sum up I would like to have an image behave according to only a small part of the image.

For example, imagine an image of the solar system, it is 1000px width and 1000px height. The sun being a part of the image located 150 pixels from top and 150 pixels from left and having the shape of a square of 250 pixels.

I would like the sun part of the image occupy a full div with Something like : 

img { width: 100% }

Though if I do this the full image of the solar system is fully embedded in the div. And it is not centered around the sun.

To achieve what I want I have to do something like : 

img {
position: absolute;
width: 400%;
top: some pixel value;
left: some pixel value;
}

But this is headache when the original DIV where the image resides is not fixed.

So I was wondering if something existed that allows to set the image top left value and bottom right value, and having the rest of the image overflow and adjust just the same way as the portion of the image that is set with boundaries.

Maxence
  • 2,029
  • 4
  • 18
  • 37
  • Real code with images would be helpful, or at least sketch. I don't think you want to use 400% width there has to be better solution for what you want to achieve. – pegla Sep 13 '17 at 22:11
  • hmm just to clarify, the pictures in your sample are separate div, right? – johnjerrico Sep 13 '17 at 22:14
  • Hi John, no it is actually a single image with transparent background. But typing the question made me realise I am stupid. I should actually make width of image times bigger (hundred of percents) to have a specific portion of image occupying full div, but then I can't position it with pixels !! I guess I should use % or vw, vmin, vmax... or it won't work.. I will try to play with this and see if I can reach the desired effect ... (i may cancel question not to pollute too much and ask later if I still have issues) – Maxence Sep 13 '17 at 22:22

3 Answers3

1

Using background-image in CSS instead of an <img /> tag would make this fairly simple and be completely responsive:

.sun {
  width: 25%;
  height: 0px;
  padding-top: 25%;
  background-image: url(https://i.imgur.com/3lHAYdT.png);
  background-size: 400%; /* 400% * 250px == 1000px */
  /* Edit: a little confused, but looks like you need 20% instead.  Trying to figure out why. */
  background-position: 20% 20%; /* 15% of 1000px = 150px */
}
<div class="sun"></div>

If you prefer to use an <img /> tag, you can along with position: absolute; and overflow: hidden;

.sun {
  width: 25%;
  height: 0px;
  padding-top: 25%;
  position: relative;
  overflow: hidden;
}

.sun img {
  width: 400%;
  height: auto;
  position: absolute;
  top: -60%; /* 60% is 15% of 1000px * 400% */
  left: -60%;
}
<div class="sun"><img src="https://i.imgur.com/3lHAYdT.png" alt="universe" /></div>
Jonathan
  • 6,507
  • 5
  • 37
  • 47
  • Thanks Jonathan I indeed realised I was stupid positioning in pixels. 15% 15% is definitely what I should use. Using background is probably also a good idea instead of playing with absolute positioning and z-index... – Maxence Sep 13 '17 at 22:25
  • The `` tag does not need or use a closing slash. – Rob Sep 13 '17 at 22:51
  • 1
    @Rob yes it does if you choose to . Inform yourself about doctypes and syntax to be used – G-Cyrillus Sep 13 '17 at 22:58
  • @G-Cyr It does not and you cannot show any HTML specification ever created that says you must use the closing slash, that it's needed, or that it does anything. – Rob Sep 13 '17 at 22:59
  • You said, "@Rob yes it does..." – Rob Sep 13 '17 at 23:05
  • well actually if you use the old(very first) html syntax you did not even have to use closing tags .... but i do not think that is allowed in HTML5 and i'm not going to read the spec again for this... too confusing for the nowdays browsers to sort it out correctly. ;) have a nice day. – G-Cyrillus Sep 13 '17 at 23:10
  • @G-Cyr You switched gears. I'm talking about the closing slash, not tags. The spec does not mention any closing slash and their own examples do not show any closing slash. Never have. – Rob Sep 13 '17 at 23:17
1

You can also use object-fit:

The object-fit CSS property specifies how a replaced element, such as an <img> or <video>, should be resized to fit its container.

img {
  vertical-align: top;
  object-fit: none;
  padding: 5px;
  border: solid;
  margin: 5px;
  background: linear-gradient(60deg, tomato, gold, silver, purple, brown, turquoise, lightgray);
}

img:nth-child(2) {
  width: 130px;
  height: 125px;
  object-position: 0 0;
}

img:nth-child(3) {
  width: 140px;
  height: 45px;
  object-position: -130px 0;
}

img:nth-child(4) {
  width: 80px;
  height: 100px;
  object-position: -160px -50px;
}

img:nth-child(5) {
  width: 140px;
  height: 150px;
  object-position: -250px -30px;
}

img:nth-child(6) {
  width: 80px;
  height: 70px;
  object-position: 0 -230px;
}

img:nth-child(7) {
  width: 70px;
  height: 75px;
  object-position: -70px -125px;
}

img:nth-child(8) {
  width: 80px;
  height: 80px;
  object-position: -325px -260px;
}

img:nth-child(9) {
  width: 180px;
  height: 65px;
  object-position: -200px -370px;
}

img:nth-child(10) {
  width: 65px;
  height: 65px;
  object-position: -380px -370px;
}

img:nth-child(11) {
  width: 240px;
  height: 140px;
  object-position: 0 -295px;
}

i {
  font-size: 0.5em;
}
<h1>testing object-fit <i>(full image below)</i></h1>
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<hr/>
<h2>original</h2>
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />

object-position is to be used alike background-position

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • The `` tag does not need or use a closing slash. – Rob Sep 13 '17 at 22:51
  • 1
    @Rob It does and it does not . When you decide NOT to use a non closing tag, it means that you use HTML-4 syntax, meanings you also do not use it on hr or input tag to be coherent. If you choose to use the closing tag, that means you are using the XHTML syntax. BOTH are allowed inHTML5 but not together. I dropped HTML4 syntax years ago, and i'll stick to the XHTML syntax. Please inform yourself about doctypes and syntax to be used ;) – G-Cyrillus Sep 13 '17 at 22:56
  • No. The closing tag is not used or required in HTML4 either. In fact, the closing slash on `` or `
    ` has never been needed in any HTML specification ever. And XHTML, properly served as `application xml/xhtml` is a different animal (it's XML).     – Rob Sep 13 '17 at 22:58
  • @Rob Can you read me again ? where did i say closing tag was to be used in HTML 4 ? inform yourself on the W3C site where you have every officials standards about html/xhtml/xml/svg/ ... languages and their doctypes .... or best, use their validator https://validator.w3.org/ you will find it usefull :) – G-Cyrillus Sep 13 '17 at 23:02
  • You said, "it means that you use HTML-4 syntax". That's not true. I can't read something that does not exist so please show me a link to any HTML specification in the history of the web that shows a closing slash is needed, required, or has any meaning whatsoever. And please quit referring to XHTML and XML. – Rob Sep 13 '17 at 23:04
  • @rob I refer to doctypes HTML 4 and XHTML . and HTML5 validate both syntax. you choose one or the other so that you write or is both valid. Look for yourself, you'll end up finding out anyway one day, i will not be the last telling you. – G-Cyrillus Sep 13 '17 at 23:23
  • I said nothing about it being invalid. I said the closing slashes are not specified, are unused, mean nothing, and are ignored. You said you find reading the spec difficult and you won't look at it now. I suggest you learn how to read the spec and find out why you are so wrong now. – Rob Sep 13 '17 at 23:33
0

Just use a container with the intended size of the image excerpt and overflow: hidden;. Then position the image according to the intended excerpt using negative values for margin-top and margin-left as shown below.

Example (the originaly image can be viewed at https://www.pics.edu.pk/Students/images/48/newcertificate_sample.jpg):

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

img {
  margin-top: -500px;
  margin-left: -392px;
}
<div class="container">
  <img src="https://www.pics.edu.pk/Students/images/48/newcertificate_sample.jpg">
</div>

Addition: You can make the container any size you want, size/scale the (whole) image with a defined width and height: auto and define the excerpt using negative values for margin-left and margin-right. It takes a bit of trial and error, but you can achieve to display any part of the image with the method I describe, in any size.

BTW: Image sprites work like that, too, if you google "image sprites", you'll find lots of examples.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Hi Johannes, this is kind of what I did, yet I want the image to still adapt to the containing div. Then instead of using 200x200 I should probably get inspiration from this thread : https://stackoverflow.com/questions/10062811/can-i-set-the-height-of-a-div-based-on-a-percentage-based-width and also using pourcentage for the margins... – Maxence Sep 13 '17 at 23:26
  • I will try to get inspiration from answers here and see if I can make Something of it – Maxence Sep 13 '17 at 23:27
  • You can change the container size, and for the image itself you can still define a size (i.e. a defined `width` and `height: auto` to preserve the width/height proportion) to scale it. – Johannes Sep 13 '17 at 23:27
  • humm.. what would be great is having the container width 100% and the height a pourcentage of this. (my portion is not exactly 200x200 nor 250x250 but Something like 585x542px so height 92.64% of width. ) then I can enlarge image based on width ratio (1368/585 ie 234%) and then adjust margins with a percentage to make the right portion Inside the div... Well I will play with all this tomorrow – Maxence Sep 13 '17 at 23:33
  • moreover i want to see the overflow. I juts need the sun, which is a non-centered portion of image, be centered Inside my div. And when div is redeimensionned, the sun stretch accordingly and planets around it change size too. The sun still being the center of div. – Maxence Sep 13 '17 at 23:36
  • What I mean is: Just make the container any size you want, size/scale the (whole) image with a defined `width` and `height: auto` and define the excerpt using negative values for `margin-left` and `margin-right`. It take sa bit of trial and error, but you can achieve to display *any* part of the image with the method I describe, in *any* size. BTW: Image sprites work like that, too, if you google "image sprites", you'll find lots of examples. – Johannes Sep 13 '17 at 23:44