Develop Reference

What to change in order for this to shrink?

So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.

You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script

All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;

Bootstrap Header Logo Image Not Showing in Mozilla

Bare in mind I'm fairly novice with HTML and CSS. I've got a logo in my bootstrap header on my website (www.prettyugly.co.nz)
I originally used the follow code to display it and it worked fine in Chrome
.image {
content: url("/img/logo-white.png");
}
then this in the HTML to call that CSS
<div class="image"></div>
I since learned that you have to use the :before command for content to work in Firefox, however I can't get it to work across the board.
Any ideas?

You should simply show the image using (HTML):
<div><img src="/img/logo-white.png" /></div>
But if you want to set it as background, then you should use (CSS):
.image {
background-image: url("/img/logo-white.png");
width: 225px; height: 63px; /* Dimensions of image */
}

Resize images but keep its ratio?

First off, I see others have made similar posts and I will be reading them fully but I just wanted to put a fresh one up as you never know if someone has something better.
Explain my situation:
I want to make an image gallery where you click thumbnails and on click a larger version of the image appears in a div to their direct right. I understand how to do this, but I can already see a problem that will occur later on.
All my images are different sizes so I can see keeping there ratio correct being very difficult.
Lets say I have a div that's 500px wide and 400px high. What could I do to put any image inside this of any size that would scale down proportionally.
Just for information my images will be a lot bigger than the div to start with.

You could simply do this:
<div style="width: 500px; height: 400px">
<img style="height: 100%; width: 100%">
</div>​
or use one of the solutions provided here: automatically change the image size in the original ratio of the while change the size of that images parent element

<div style="width: 500px; height: 400px">
<img src="as.jpg"/>
<img src="as.jpg"/>
</div>​
css
img{
max-height: 20%;
max-width: 25%;
}

Responsive blank image overlay for an image

I'm trying to find a javascript solution where it dynamically overlay a blank image similar to David Walsh's dwImageProtector Plugin (http://davidwalsh.name/image-protector-plugin-for-jquery). My problem with that plugin is, first, it append the overlay to the 'body' which actually don't align to the targeted image and second, that plugin is not built for responsive, meaning if I adjust the width of my browser the overlay image will stay the same way as the original parsed image size.
my code look something like this:
//css
.column { position: relative }
.column img { width: 100%; }
// html
<div class='column'>
<img class='protect' src='img/source.jpg' />
<span>copyright 2013</span>
</div>

Note: The overlay trick only deters at best the uninitiated visitors who want to steal your images. There is no feasible way of detering thefts because:
Visitors can check the image source from Inspector, and download it directly (but you can circumvent that using .htaccess rules that prevents direct file access)
Visitors can hide the image overlay
Visitors can take a screenshot of the page
Visitors can sniff files that are served from the server to their browser
Back to my solution: You don't actually need to use JavaScript (or jQuery) for this purpose. A simple CSS trick using pseudo-elements will work. Let's say you have the following markup:
<div class='column'>
<div class='protect'>
<img src='img/source.jpg' />
</div>
<span>copyright 2013</span>
</div>
Your CSS:
.protect {
position: relative;
}
.protect:after {
background-image: url(/path/to/overlay);
background-size: cover;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
}
If you can't change the markup, though, then you should rely on using jQuery to wrap your image element with a <div class="protect"> element, and apply the same styles as mentioned above, i.e.
$("img").each(function() {
$(this).wrap('<div class="protect" />');
});

Show part of Image (sub-image in image strip) without squishing it?

I have an image on a webpage. It's a pretty big image, however. It's 6144*768. In actuality, it is a series of 6 images mushed together.
I read that it's better practice to load this one image instead of loading 6 images. I've found this to be true as well, when I used tables and CSS.
However, when I set this image as the source of an image element and then set the size of the image element to 1024*768, the image is squished. Ack!
How can I get this image to be not-squished by using only Javascript? Also, how could I move the background of the image?
[example: Imagine a really long strip of paper. Then, place a small cut-out rectangle of paper over that somewhere on the strip of paper, so that you can only see the part of the strip that is inside the rectangle. This is what I want to do]

Place the image inside a container element, and set the overflow to hidden using CSS.
Leave the image as it is and it won't be squished
HTML
<div id="imgContainer">
<img src="myImage.jpg" alt="" width="6144" height="768" />
</div>
CSS
#imgContainer
{
height: 1024px;
width: 768px;
overflow: hidden;
}
Then to move the image use negative values for the CSS style margin-left.
#imgContainer img
{
margin-left: -1024px;
}
You can do this with jQuery as follows
$("#imgContainer img").css("margin-left", "-1024px")

What OP is looking for is CSS Sprites (also see A List Apart or Smashingmag).

Don't scale your image with CSS; instead, put it in a wrapper div and do something like this in your CSS:
#myImageWrapper {
height: 1024;
width: 768;
overflow: hidden;
}