I'm designing a web page which has links to several sites.
I'm using the a href tag with the image of the logo of the website.
When I tried to re-size the images in the CSS file, nothing worked.
Any ideas of what I'm doing wrong (e.g using the wrong tag in CSS etc.)?
HTML Code:
<div id="main">
<div class="container page">
<h1>Useful Links</h1>
<img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker">
<img class="links" src="/pictures/external%20links/reddit.png" alt="Reddit Build a PC">
<img class="links" src="/pictures/external%20links/tomshardwre.png" alt="Tom's Hardware">
<img class="links" src="/pictures/external%20links/CNET-Logo.png" alt="Cnet">
<img class="links" src="/pictures/external%20links/pcper.jpg" alt="PC Perspective">
</div>
</div>
CSS Code:
.container a img{
width: 200;
height: 200;
display: block;
margin-right: auto;
margin-left: auto;
}
.container{
width: 960px;
height: auto;
margin: 0 auto;
}
Add px to the measures of img at first.
You haven't specific the unit of measurement for your images width/height ie, px, %, etc.
If you were adding the value to the image tag itself then that 200 would automatically translate in the browser as 200px but not in the css.
So this would work as 200px by 200px
<img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker" width="200" height="200">
but in css it has to be:
.container a img{
width: 200px;
height: 200px;
display: block;
margin-right: auto;
margin-left: auto;
}
Now if you want them to display in one row, remove the "display:block" property.
And they wont all fit on the same row so try reducing it to around 188px (or 19% - margin will fill the remaining space) if that is what you are trying to achieve.
In your html, you can just specify a custom height and width
For example,
<img class="links" src="/pictures/external%20links/images%20(1).jpg" height="200" width="200" alt= "PC Part Picker"></a>
Use the following CSS code:
.container a img{
width: 200;
height: 200;
display: block;
margin-right: auto;
margin-left: auto;
}
.container{
width: 960px;
height: auto;
margin: 0 auto;
}
Related
I'm trying to fit custom size images into a div ,but the images not aligning within the div.I want the alignment like the image in screenshot 1.Please tell me where i'm wrong.
This is a test project actually,i have uploaded the files to the site .You can find it # http://estoreproj.xyz/sony.aspx
I want it to look alligned like the products in the samsung page which is under categories as dropdown.
here's the JSFiddle---->>> https://jsfiddle.net/b160aj5m/
The screenshots ,css and code are below
Screenshots:
screenshot1
screenshot2
.product{
display: block;
float:left;
margin: 1% 0 1% 1%;
}
.productgrid img{
max-width:100%;
display:block;
padding-bottom: 8px;
margin: 0 auto;
}
HTML Code:
<div class="productgrid">
<img src="phonepics/sony/z5.jpg" >
Sony Xperia Z5
<h3>$123</h3>
<ul>
<button class="button"><span>Buy </span></button>
</ul>
</div>
</div>
Do not apply an explicit width or height to the image. Instead, give it:
max-width:100%;
max-height:100%;
And if You want to specify the width, then set height: auto
Take the image inside a div. Set div width and height as your requirement. Then set img width: 100%, height: auto.
HTML:
<div class="productgrid">
<div class="img-container">
<img src="phonepics/sony/z5.jpg" >
</div>
Sony Xperia Z5
<h3>$123</h3>
<ul>
<button class="button"><span>Buy </span></button>
</ul>
</div>
</div>
CSS:
.img-container {
width: 16px;
height: 20px;
margin: 0 auto;
}
.productgrid img{
width: 100%;
height: auto;
}
I'm wanting to make my images smaller as the window size gets smaller.
However, I have to define the size of these two images by width, yet because 'max-width' overrides 'width' then it makes the images really small? I need to use 'max-width' to resize my images. However, I have two images on the left hand side that I have used both width and max-width and its width is defined and it resizes? What am I doing wrong with the other two?
img {
width: 100%;
height: auto;
width: auto\9;
}
/* css for the two larger images on the left-hand side*/
#imageleft {
display: inline-block;
height: 30px;
}
/* css for the two smaller images on the right-hand side*/
#imageright {
display: inline-block;
width: 50px;
height: 100px;
}
<!-- large images to left -->
<div id="imageleft">
<a href="index.html">
<img src="images/photo-1464375117522-1311d6a5b81f.jpeg" alt="Guitar image" style="max-width:100%; width:600px;height:400px">
</a>
<a href="index.html">
<img src="images/photo-1470020618177-f49a96241ae7.jpeg" alt="Fire breather" style="max-width:100%; width: 300px;height: 400px">
</a>
</div>
<!-- small images to the right -->
<div id="imageright">
<a href="index.html">
<img src="images/photo-1472653431158-6364773b2a56.jpeg" alt="festival" style=" max-width: 100%; height: 200px">
</a>
<a href="index.html">
<img src="images/photo-1473396413399-6717ef7c4093.jpeg" alt="stage view" style="width:291px; max-width: 100%;height: 196px">
</a>
</div>
#helpme123 I really didn't get what kind of layout you desire to achieve. Could you change your post and provide an example of it, please?
When you use width and max-width together, it's usually because you are giving the element a width relative to its parent (or the viewport or the current font-size or the base font-size), but you also want to explicitly state an absolute width, beyond which the element should not widen.
Working Example:
div {
width: 90%;
padding: 12px;
}
.parent {
max-width: 1000px;
background-color: rgb(255,0,0);
}
.child {
max-width: 600px;
background-color: rgb(255,255,0);
}
.grandchild {
max-width: 400px;
height: 100px;
background-color: rgb(0,0,255);
}
<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>
If you run the example in a full window and shrink the window size and then gradually grow it, you'll see that the divs each widen relative to their parent... until they reach their max-width, after which they stop widening.
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
Hi I'm trying to create an image gallery that centers rows of images with fixed dimensions. The issue is the number of images in each row will change depending on the window size so I can't use mutiple containers and margin: auto them. Here is an example page that does what I'm after:
http://inspire-gwen.tumblr.com/
You'll notice that as you change the size of the window, the image rows change, but each one is still centered on the page. Is it possible to implement this with purely CSS? This is the code I have written, with some random images:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<div><img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg"></div>
<div><img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg"></div>
<div><img src="http://i.imgur.com/ElxvqJK.jpg"></div>
<div><img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg"></div>
</div>
</body>
CSS
.img_container img {
max-height: 300px;
display: block;
width: auto;
height: auto;
vertical-align: bottom;
}
.img_container div {
padding: 5px;
}
Images are by default inline items, wrapping them in 'div' tags is currently causing them to be block items. You could get by with simpler with this:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
<img src="http://i.imgur.com/ElxvqJK.jpg">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</body>
CSS
.img_container {
text-align: center;
}
.img_container img {
max-height: 300px;
width: auto;
height: auto;
vertical-align: bottom;
margin: 5px;
}
Yes, this is very possible..
so far you have been using px to define the image width... what you need is %.
Here is the JSFIDDLE: http://jsfiddle.net/uh1wvaev/2/
Here is my code:
HTML
<div class="img_container">
<div class="img_wrapper">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
</div>
<div class="img_wrapper">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
</div>
<div class="img_wrapper">
<img src="http://i.imgur.com/ElxvqJK.jpg">
</div>
<div class="img_wrapper">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</div>
CSS
.img_wrapper {
width: 25%;
float: left;
}
img {
width: 100%;
}
What I did was, I gave each <DIV></DIV> a class of "img_wrapper". Then I gave each img_wrapper a width of 25% of the page. Therefore whenever the page is resized, the img will be given a width of 25% of the new window size.
If you have any questions, or need further assistance please leave a comment below
I am trying to make an image responsive in my responsive website as my theme is also responsive. But I am struggling to find a solution which fits my needs.
Here is my code
#payment_wrapper img {
width: 375px;
max-width: 100%;
height: auto;
}
<div id="payment_wrapper">
<img title="Payment" alt="Payment" src="{{media url="payment.png}}" />
<a target="_blank" href="https://www.mysite.co.uk/"> <img title=" image2 " alt=" image2" src="{{media url="image2.png}}" /> </a>
<a target="_blank" href="http://www.mysite.co.uk"> <img title=" image3" alt=" image3 " src="{{media url="image3.png}}" />
</div>
Can some one tell me what am I doing wrong?
Before anybody mark it as a duplicate post, know that I have tried other posts and all the solutions mentioned in those posts, but none is working for me.
if I just set width: 100% my image goes too big, if I set max-width: 375px; it does not response.
Can you tell me what is the correct way to write the above code.
Your help in this matter will be appreciated,
Try setting it up so that all your images remain relatively the same size as they shrink by setting their max-width as percentages.
#payment_wrapper img{/*2 smaller images (100px)*/
max-width: 16%;
}
#payment_wrapper img.payment_wrapper{/*Larger image (375px)*/
max-width: 65%;
}
You can prevent them from shrinking too small by adding a minimum width to your container.
#payment_wrapper{
min-width: 200px;
}
For an example, see this jsfiddle
you need to change width in .footer-bottom .item
.footer-bottom .item {
margin-left: 5px;
margin-right: 5px;
width: 100%;
}
hope it will helps you.
Set only max-width:100% so that it will not overflow the outer container on smaller devices. Don't set width to the image to make it responsive.
#payment_wrapper img {
max-width: 100%;
height: auto;
}
You should wrap your img in blocks and set max-width on them.
Note the <div> tag around the first image and the a { display: block; }.
#payment_wrapper img {
width: 100%;
height: auto;
}
div, a {
display: block;
}
#payment_wrapper > *:nth-child(1) {
max-width: 600px;
}
#payment_wrapper > *:nth-child(2) {
max-width: 500px;
}
#payment_wrapper > *:nth-child(3) {
max-width: 400px;
}
<div id="payment_wrapper">
<div><img title="Payment" alt="Payment" src="http://placehold.it/600x300" /></div>
<a target="_blank" href="https://www.mysite.co.uk/"> <img title=" image2 " alt=" image2" src="http://placehold.it/500x300" /> </a>
<a target="_blank" href="http://www.mysite.co.uk"> <img title=" image3" alt=" image3 " src="http://placehold.it/400x300" /></a>
</div>