3 Replies - 536 Views - Last Post: 20 June 2013 - 01:16 AM

#1 apathybear7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 35
  • Joined: 19-June 13

image not adjusting size within div

Posted 19 June 2013 - 11:37 PM

Hi all, I am learning the basics of html/css so bare with me.

so here is a bit of HTML code
<div id="xians">
		
		<p><img src="images/theweeknd.jpg"></p>
		<h2>Xians</h2>
		<p>Many religions have some form of eternal bliss or heaven as their apparent goal often contrasted with eternal torment or dissatisfaction. The source of all mentally created dissatisfaction appears to stem from the ability to compare and contrast experiences and find reality as one is living it to be less than ideal. Many religions believe this was caused by man eating of the forbidden Tree of the Knowledge of Good and Evil. Man's eyes were "opened" to know the distinction between good and evil(Genesis 3:5). The solution is to seek out ways to either make experienced reality conform to the ideal and/or to lower expectations to the level of the experienced.[citation needed] When one can live in the moment with expectations in harmony with experiences one has achieved the greatest mental contentment possible.[citation needed] Variants of this pursuit are found in many religions and manifest in forms of meditation and prayerful devotions.
		The American philosopher, Robert Bruce Raup wrote a book Complacency:The Foundation of Human behavior (1925) in which he claimed that the human need for complacency (i.e. inner tranquility) was the hidden spring of human behavior. Dr. Raup made this the basis of his pedagogical theory, which he later used in his severe criticisms of the American Education system of the 1930s.
		</p>
	</div>



And here is the CSS that accompanies it
#xians {

		background-color: blue;
		width: 500px;

}


Now I am curious to know why the image
<img src="images/theweeknd.jpg">
is not adjusting to the width specified in the CSS. If there is another way to do this besides re-sizing the image I would like to know. If not, well now I know ;)

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: image not adjusting size within div

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: image not adjusting size within div

Posted 19 June 2013 - 11:44 PM

View Postapathybear7, on 20 June 2013 - 08:37 AM, said:

Now I am curious to know why the image is not adjusting to the width specified in the CSS.

asked the other way round, why should it?

#xians is a <div> (a block element) <img> is an inline element. inline elements do not inherit the width of their parent by default.

PS. an images dimension should be set through the width/height attributes (and the required alt attribute is also missing).
Was This Post Helpful? 1
  • +
  • -

#3 apathybear7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 35
  • Joined: 19-June 13

Re: image not adjusting size within div

Posted 20 June 2013 - 12:29 AM

Thank you Dormilich, that cleared things up. I had thought that they did.

Another question: Are there any repercussions for taking a larger image and re-sizing it via width/height attributes? Will it slow down page display in anyway? Should I stay away from this type of practice if possible?

Thanks again.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: image not adjusting size within div

Posted 20 June 2013 - 01:16 AM

View Postapathybear7, on 20 June 2013 - 09:29 AM, said:

Another question: Are there any repercussions for taking a larger image and re-sizing it via width/height attributes? Will it slow down page display in anyway? Should I stay away from this type of practice if possible?

resizing itself is not the problem (though some browsers do a better job than others), but you still have the large image to download, which usually takes longer than for an optimised image (which often also has a slightly better quality).

I recommend to create an image for each size to display.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1