[antonm80]

hey there,

I wonder if it’s actually possible to make images inside a specific post go well outside the post boundaries from left and right? I want to have the image screen-wide size but keep the text box the same.

Example: https://medium.com/@antonmoiseenko/to-lie-or-not-to-lie-f2679593f054

thanks!

[ahmetsali]

Hi, maybe this will work for you;

1-) Paste the code below to the External Js Box in Theme Options > Style tab.

<script>
jQuery(document).ready(function($) {  
$('.full-width-image').each(function(index, element) {
  $(element).css("min-height", $(element).find('img').height());
  $( window ).resize(function() {
    $(element).css("min-height", $(element).find('img').height());
  });
});
});
</script>

2-) Paste the code below to the Custom CSS box;

.full-width-image {
	margin: 1em 0 1.6em;
	}
.full-width-image img {
	position: absolute; left: 0; width: 100%;
	}

then add your full width image to the content like this;

<div class="full-width-image">
  <img src="your-image-url.jpg"/>
</div>

[antonm80]

*almost* worked.

look:
http://www.vinileaks.ru/2014/12/narod-protiv-bibi-graeca/

the last image is stretched as desired but now it overlaps some of the text. can this be avoided?

the code is:

[antonm80]

div class=”full-width-image”

img alignleft wp-image-2855 size-large” src=”http://www.vinileaks.ru/wp-content/uploads/2014/12/bibi8-1024×258.jpg” alt=”bibi8″ width=”780″ height=”196″ /
/div

[ahmetsali]

Hi again, i can’t see the full width image code in your content.

[antonm80]

yes, because you reply very seldom, I had to make to look good.

look at it now, please
http://www.vinileaks.ru/2014/12/narod-protiv-bibi-graeca/

[antonm80]

and the same thing in mobile version – image overlaps text

[ahmetsali]

Hi again, update the External Js code as;

1-) Paste the code below to the External Js Box in Theme Options > Style tab.

<script>
jQuery(document).ready(function($) {  
$('.full-width-image').each(function(index, element) {
  $(element).css("min-height", $(element).find('img').height());
  $( window ).resize(function() {
    $(element).css("min-height", $(element).find('img').height());
  });
});
});
</script>

Also when i check your markup i see you have put another image in full-width-image div but have not removed the dummy image in my code, include only one image in this div.

[antonm80]

I did as you said – no visible effect. Still image overlapping.

[ahmetsali]

this is weird, your custom js code is encoded on your source code, so it doesn’t work. Try coping and pasting the js code from here;

http://codepen.io/anon/pen/QwEMEO

[antonm80]

IT WOKED!!! Great, thanks a lot!

[antonm80]

I am sorry, I was too fast to say that. it works on Chrome, but still overlapping in Safari and Firefox, both on desktop and mobile platforms.

Any ideas?

[ahmetsali]

i just checked your url in firefox, looks fine as in chrome on my side.

[antonm80]

actually, yes, seems ok now.
thank you!