Keeping image size fixed

Question

I have an img that I want to not cross over into the below section. It only crosses over when i drag the viewport out and makes the window bigger.

I would like the restrict the image movement.

That probably doesn't explain my issue very well so I have attached two images to explain:

Smaller window:

Smaller window

Larger window:

Larger window

The first image (smaller window) is what I want the image to look like, however as the larger window shows once the window becomes bigger it moves down as the page is responsive and crosses over into the references section. I would like to be able to stop it from doing this?

General images CSS:

img {
display: block;
margin: auto;
height: auto;
margin: auto;
max-width: 80%;
padding-bottom: 1em;

}

.bassportrait CSS:

 .bassport {
float: right;
   overflow: hidden;
   padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
height: 20%;
width: 20%;

}

Hope that makes sense and I have shown you the relevant code - I'm a beginner!

We really can't help you without seeing your code. As of now, we can only guess. — Michael Benjamin, Jan 04 '18 at 20:58
okay I shall edit and add the pieces of code that are relevant to the image — UchiCode, Jan 04 '18 at 21:01
Agreed, it will help to [see your code](https://stackoverflow.com/help/mcve). This may an issue with [clearing floats](https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use). — showdev, Jan 04 '18 at 21:14

dmbaughman · Accepted Answer · 2018-01-05T19:51:52.150

1

Since your .bassport is floated right, that float will need to be cleared on the element below to prevent the overlap. There are lots of ways to do this, but the most common is to add a clearfix to its parent element.

.parent-element:after {
  content: "";
  display: table;
  clear: both;
}

Notional markup

<div class="parent-element"><!-- Clearfix applies to this element -->
  <p>Ulrika's work...</p>
  <p>Bass died...</p>
  <img class="bassport" src="..."><!-- Floated element that needs to be cleared -->
</div>

Alternatively, if you're using a framework that has a clearfix utility class, you could just add that class to the parent div and it would have the same effect.

Reference: https://css-tricks.com/snippets/css/clear-fix/

edited Jan 05 '18 at 19:51

answered Jan 04 '18 at 22:25

dmbaughman

578
2
7

once I have added the clearfix how would i get my image to align right then? sorry Im new to this! – UchiCode Jan 05 '18 at 00:01
That clearfix shouldn't affect the ability to float items inside. If you need more help, try to reproduce the issue in jsfiddle or codepen and share the link. – dmbaughman Jan 05 '18 at 00:46
do i apply this to the picture or to the reference? – UchiCode Jan 05 '18 at 18:05
The clearfix should be added to the element that contains the image that is floated right. I added some notional markup to the example to clarify. – dmbaughman Jan 05 '18 at 19:53
This does not appear to restrict the image from crossing over into the references section – UchiCode Jan 07 '18 at 18:16
It's difficult to exactly diagnose and offer solutions without a code example. Please create an example that exhibits the issue in jsfiddle or codepen so I can help further. – dmbaughman Jan 08 '18 at 18:56

Keeping image size fixed

1 Answers1