jagguy
asked on
image resize on swap images
I have code that has links in a row and swaps images.
This was an ordeal to say the least.
The images dont resize as i thought on browser resize so I had to use media queries to alter size of these images.
Can I get the images to resize without adding media queries?
here is what happens, see I get only past of the image displayed on resize?
http://www.mymrt.net/ComputerTraining/test4.html
This was an ordeal to say the least.
The images dont resize as i thought on browser resize so I had to use media queries to alter size of these images.
Can I get the images to resize without adding media queries?
here is what happens, see I get only past of the image displayed on resize?
http://www.mymrt.net/ComputerTraining/test4.html
img, embed, object, video {
max-width: 100%;
}
ul.nav
{
list-style-type: none;
padding: 0;
margin: 0;
float: left;
}
.nav li#welcome a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
}
.nav li#welcome a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
.nav li#welcome2 a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
}
.nav li#welcome2 a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
.nav li#welcome3 a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
}
.nav li#welcome3 a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
.nav li#welcome4 a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
}
.nav li#welcome4 a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
#head ul li a
{
text-decoration: none;
float:left;
margin-right:40px;
}
#head ul li
{
display: inline;
}
#head img
{
max-width: 100%;
}
#head ul
{
/*margin-left: 15%;*/
padding:0;
list-style-type: none;
border:none;
}
@media screen and (min-width: 960px)
{
ul.nav a{ height: 100px; width: 100px;}
}
@media screen and (max-width: 959px)
{
ul.nav a{ height: 50px; width: 50px;}
}
</style>
</head>
<body>
lkjl
<div id="head">
<ul class="nav">
<li id="welcome"><a href="home.html"></a></a></li>
<li id="welcome2"><a href="home.html"></a></a></li>
<li id="welcome3"><a href="home.html"></a></a></li>
<li id="welcome4"><a href="home.html"></a></a></li>
</ul>
</div>
ASKER
No that doesnt work for a list of images with specific names as below.
I can do a basic example but it gets complicated for real examples.
The below gives me no output
I can do a basic example but it gets complicated for real examples.
The below gives me no output
.nav li#welcome a {
background-image:url(images/ic1.png); /*todo set %size here */
background-repeat: no-repeat;
background-size:100% 100%;
}
.nav li#welcome a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
.nav li#welcome2 a {
background-image:url(images/ic1.png);
background-repeat: no-repeat;
background-size:100% 100%;
}
.nav li#welcome2 a:hover {
background-image:url(images/ic1b.png);
background-repeat: no-repeat;
}
#head ul li a
{
text-decoration: none;
float:left;
margin-right:40px;
}
#head ul li
{
max-width:100px;
}
#welcome{
max-width:100px;
}
#welcome2{
max-width:100px;
}
@media screen and (min-width: 960px)
{
}
@media screen and (max-width: 959px)
{
}
</style>
</head>
<body>
lkjl
<div id="head">
<ul class="nav">
<li id="welcome"><a href="home.html"></a></li>
<li id="welcome2"><a href="home.html"></a></li>
</ul>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://blog.kurtschindler.net/post/flexible-dynamically-resizing-images-with-css