I tried to make 75% width of paragraph in post, and also 100% responsive width of images. However, <img> is always in <p> as default.
<p>Some texts</p>
<p>Some texts</p>
<p><a><img src="..."></a></p>
<p>Some texts</p>
<p>Some texts</p>
Currently, I can only make .entry-content p {max-width: 75%;} and make a <div> outside the <img>. So that the system won’t create a <p> to hold <img>. But it’s not the best practice.
Any idea to this problem?
This is the layout I expected.
You can absolutely do this with pure CSS – no need of JS for that – it’s just maths. Considering your paragraphs are 75% of the container width, your image need to be 100% of paragraph width + the 25% missing of the container width. So with this formula you get the right percentage your image should have as width:
Here is a jsfiddle illustrating this.