All geek questions in one place

How to prevent the inclusion of a single line <img> in 2 lines after increasing

My ducks. I want to keep them in a row. However, when I zoom in, they break up and form two lines. What can I do to just not show / stay on the same line when zoomed in?

The code is here, these ducks live in a 2x1 table

<table> <tr> <td>Check out deez ducks:</td> <td><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"><img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" height="150" width="96"></td> </tr> </table>

https://jsfiddle.net/myn2qarf/

Gif problems: http://imgur.com/a/E5blp

EDIT: Found the answer needed to add "nowrap" to a td containing ducks. So, if I had before:

 <td> *Ducks go here* </td>

I had to

 <td nowrap> *Ducks go here* </td>
+5
source share
4 answers

Found the answer! I needed to add "nowrap" to the element, this will prevent the images from flowing around. So my code has been changed from

 <td> *images of ducks* </td>

to

 <td nowrap> *images of ducks* </td>
0
source

add images to div and put css here here - > Jsfiddle

 .flex-style { display: flex; width: 100%;}
+1
source

Set the width of the image as a percentage. In this case, 20% seems pleasant.

0
source

The main idea would be that if you do not want the enlarged image to offset another, to give it an absolute position and place a placeholder behind it. For instance:

HTML:

 <body> <table> <tr> <td class="img-cell"> <img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" /> <div class="img-spacer"></div> <img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" /> <div class="img-spacer"></div> <img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" /> <div class="img-spacer"></div> <img src="http://www.mapleleaffarms.com/lib/sitefiles/White-Duck_Facing_Front.jpg" /> <div class="img-spacer"></div> </td> </tr> </table> </body>

CSS

 .img-cell { font-size: 0px; } img { width: 100px; height: auto; position: absolute; } img:hover { width: 200px; height: auto; } .img-spacer { display: inline-block; width: 100px; }

https://codepen.io/anon/pen/zwZWRe

If that is what you want.

In addition, +1 in order to make your question interesting.

PS: Your violin did not allow me to grow. I am in Firefox if you are interested.

0
source

Source: https://habr.com/ru/post/1267296/

More articles:


All Articles