Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Force img size in website
New Posts  All Forums:Forum Nav:

Force img size in website

post #1 of 11
Thread Starter 
Ive got some images that must be X and Y sizes. However when i set the img to X width and Y height it may take a stretched image and distort it a lot which ruins the image. Its late and i cannot remember the correct way in doing it. The help is greatly appreciated. My goal is to resize the image to meet the requested size for images. Such as 100px wide by 80px tall. But if the image is 100px wide and 60px tall it will force it to the 80px. How can i force a size limitation without destroying the image? Also trying to figure out how to code to were realtorimg is always centered in the middle.

thanks

plus im trying to figure out how to force all images to center correctly. My code looks like this:

Code:
HTML:
<div class="realtorlogo"><img class="realtorimg" width="100px"src="images/century_21_logo.jpg" alt="Realtor Logo" /></div>

CSS:
.realtorlogo{width:120px; height:100px; float:left; margin:0px 0px 0px 12px; padding:0px;}

.realtorimg{margin:auto; padding:0px;}
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #2 of 11
Quote:
Originally Posted by graphicsman View Post
...Such as 100px wide by 80px tall. But if the image is 100px wide and 60px tall it will force it to the 80px. How can i force a size limitation without destroying the image?
I need a little more information to help you-- this part confuses me a little bit.

By going from 100x80 from 100x60, you are not only increasing the size (which will distort an image no matter how you do it), but you are also changing the ratio. Changing the aspect ratio will always "stretch" an image, there's no way around that. Could you elaborate a little further, maybe I'm just confused on what you're requesting.
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
post #3 of 11
Thread Starter 
i have a size limit to fill, say 100px x 80px; but i dont want an image that is at a different size (say 100px x 75px) to distort to the 80px set in the image. So how can i code it to where there are max limits but the code will not adjust the image. Hope that makes since. Also if there is any space left how can i get the image to center in the box if declared.
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #4 of 11
I believe you're looking for the max-width property.

More info: http://www.w3schools.com/cssref/pr_dim_max-width.asp
Primary PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II 720 (2.8 ghz) BIOSTAR A780L3L (AM3) MSI GeForce 9800GT G.Skill Ripjaws Series DDR3 1600 (8GB) 
Hard DriveOSMonitorPower
Crucial M4 64GB / Samsung F3 1TB Windows 7 Pro (64-bit) Dell SP2309W (2048x1152) PC Power & Cooling 610W 
CaseMouse
Cooler Master Elite 430 RC Logitech MX518 
  hide details  
Reply
Primary PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
Phenom II 720 (2.8 ghz) BIOSTAR A780L3L (AM3) MSI GeForce 9800GT G.Skill Ripjaws Series DDR3 1600 (8GB) 
Hard DriveOSMonitorPower
Crucial M4 64GB / Samsung F3 1TB Windows 7 Pro (64-bit) Dell SP2309W (2048x1152) PC Power & Cooling 610W 
CaseMouse
Cooler Master Elite 430 RC Logitech MX518 
  hide details  
Reply
post #5 of 11
Thread Starter 
Quote:
Originally Posted by iPoop View Post
I believe you're looking for the max-width property.

More info: http://www.w3schools.com/cssref/pr_dim_max-width.asp
will that still work if someone trys to load an image that is over the max width and would it resize for them???

EDIT:
code will be like this??

Code:

<div class="realtorlogo"><img class="realtorimg" max-width="100px" max-height="80px" src="images/century_21_logo.jpg" alt="Realtor Logo" /></div>

Edited by graphicsman - 10/10/11 at 12:00pm
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #6 of 11
Quote:
Originally Posted by graphicsman View Post
will that still work if someone trys to load an image that is over the max width and would it resize for them???
Yes it will. If someone loads an image that is 120x100, for example... The max-width property will resize it to 100x83. max-width will simply reduce the image to the width you set it to while keeping the aspect ratio.
Daily Driver
(21 items)
 
  
CPUMotherboardGraphicsGraphics
Phenom II X6 1090T Gigabyte GA-890FXA-UD5 XFX HD5670 1GB Gigabyte HD6570 1GB DDR3 
RAMHard DriveHard DriveHard Drive
Microcenter Value RAM OCZ Vertex 2 Maxtor STM3200820AS Seagate ST316002 3AS 
Optical DriveCoolingCoolingOS
Asus DRW-24B1ST Thermalright Venomous X Black Sanyo Denki - San Ace 9SG1212P1G01 120mm x 38mm... Win 7 Ultimate x64 
MonitorMonitorKeyboardPower
Dell U2311H Dell E193FP Dell OEM keyboard Corsair TX850V2 
CaseMouseMouse PadAudio
CM 690 II Advanced Razer Death Adder Black Edition 3.5G Steelseries QKC  On board Realtek HD audio 
Audio
Dell OEM 5.1 speaker system 
  hide details  
Reply
Daily Driver
(21 items)
 
  
CPUMotherboardGraphicsGraphics
Phenom II X6 1090T Gigabyte GA-890FXA-UD5 XFX HD5670 1GB Gigabyte HD6570 1GB DDR3 
RAMHard DriveHard DriveHard Drive
Microcenter Value RAM OCZ Vertex 2 Maxtor STM3200820AS Seagate ST316002 3AS 
Optical DriveCoolingCoolingOS
Asus DRW-24B1ST Thermalright Venomous X Black Sanyo Denki - San Ace 9SG1212P1G01 120mm x 38mm... Win 7 Ultimate x64 
MonitorMonitorKeyboardPower
Dell U2311H Dell E193FP Dell OEM keyboard Corsair TX850V2 
CaseMouseMouse PadAudio
CM 690 II Advanced Razer Death Adder Black Edition 3.5G Steelseries QKC  On board Realtek HD audio 
Audio
Dell OEM 5.1 speaker system 
  hide details  
Reply
post #7 of 11
Thread Starter 
thanks guys, i will try it later and rep

EDIT: what would be a good way to center the image on the X axis and Y axis... it would appear setting the margin to auto isnt working.
Edited by graphicsman - 10/10/11 at 12:14pm
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #8 of 11
Quote:
Originally Posted by graphicsman View Post
thanks guys, i will try it later and rep

EDIT: what would be a good way to center the image on the X axis and Y axis... it would appear setting the margin to auto isnt working.
Give this a try for the horizontal centering.
Code:
img.center {   display: block;   margin-left: auto;   margin-right: auto; }
And then add the class to the image's html.
Code:
class="center"
The vertical centering will be more involved.

Code:
img.vcenter { min-height: 10em;  display: table-cell; vertical-align: middle }
But then you have a second class that needs to go with the image's html. So you will need to have a class inside a class for this to work. It starts getting ugly as your code gets larger.
Daily Driver
(21 items)
 
  
CPUMotherboardGraphicsGraphics
Phenom II X6 1090T Gigabyte GA-890FXA-UD5 XFX HD5670 1GB Gigabyte HD6570 1GB DDR3 
RAMHard DriveHard DriveHard Drive
Microcenter Value RAM OCZ Vertex 2 Maxtor STM3200820AS Seagate ST316002 3AS 
Optical DriveCoolingCoolingOS
Asus DRW-24B1ST Thermalright Venomous X Black Sanyo Denki - San Ace 9SG1212P1G01 120mm x 38mm... Win 7 Ultimate x64 
MonitorMonitorKeyboardPower
Dell U2311H Dell E193FP Dell OEM keyboard Corsair TX850V2 
CaseMouseMouse PadAudio
CM 690 II Advanced Razer Death Adder Black Edition 3.5G Steelseries QKC  On board Realtek HD audio 
Audio
Dell OEM 5.1 speaker system 
  hide details  
Reply
Daily Driver
(21 items)
 
  
CPUMotherboardGraphicsGraphics
Phenom II X6 1090T Gigabyte GA-890FXA-UD5 XFX HD5670 1GB Gigabyte HD6570 1GB DDR3 
RAMHard DriveHard DriveHard Drive
Microcenter Value RAM OCZ Vertex 2 Maxtor STM3200820AS Seagate ST316002 3AS 
Optical DriveCoolingCoolingOS
Asus DRW-24B1ST Thermalright Venomous X Black Sanyo Denki - San Ace 9SG1212P1G01 120mm x 38mm... Win 7 Ultimate x64 
MonitorMonitorKeyboardPower
Dell U2311H Dell E193FP Dell OEM keyboard Corsair TX850V2 
CaseMouseMouse PadAudio
CM 690 II Advanced Razer Death Adder Black Edition 3.5G Steelseries QKC  On board Realtek HD audio 
Audio
Dell OEM 5.1 speaker system 
  hide details  
Reply
post #9 of 11
Quote:
Originally Posted by graphicsman View Post
will that still work if someone trys to load an image that is over the max width and would it resize for them???

EDIT:
code will be like this??

Code:

<div class="realtorlogo"><img class="realtorimg" max-width="100px" max-height="80px" src="images/century_21_logo.jpg" alt="Realtor Logo" /></div>
That's wrong. Those are CSS attributes, not HTML attributes. Look up the separation of style and content.
Shinobu
(16 items)
 
Nodoka
(16 items)
 
Index
(4 items)
 
CPUMotherboardGraphicsRAM
Intel Core i5-3570K Asus P8Z77-I Deluxe HD6450 Flex Crucial 16GB (2x 8GB) Ballistix Elite 
Hard DriveHard DriveOSMonitor
Samsung SSD 840 EVO 250GB TOSHIBA DT01ACA300 Arch Linux Dell UltraSharp U2713HM 
MonitorMonitorKeyboardPower
Dell U2410 Dell 2407WFP Cherry - Cherry Blue Switches (Unlabeled keys) Seasonic X-650 
CaseMouseAudioAudio
BitFenix Prodigy Black Logitech M570 Trackball Sennheiser HD595 Creative GigaWorks T20 
CPUMotherboardGraphicsRAM
Intel Core i5 3570K Zotac Z77-ITX WiFi EVGA 680 GTX Samsung 
Hard DriveHard DriveOSMonitor
Samsung 256GB 830 Samsung SpinPoint HD501LJ Windows 7 Dell U2410 
MonitorMonitorKeyboardCase
Dell 2407WFP Dell E248WFP Cherry Black (MX Blue Switches, Blank Keys) Silverstone Sugi SG08B 
MouseAudioAudio
Logitech Trackman Logitech Z-5500 Sennheiser HD595s 
CPUMotherboardRAMHard Drive
AMD Athlon II X2 240e Asus M5A78L-M/USB3 Crucial 8GB (2x4GB) DDR3 1600Mhz Ballistix Sport 1.5TB Hard Drives 
  hide details  
Reply
Shinobu
(16 items)
 
Nodoka
(16 items)
 
Index
(4 items)
 
CPUMotherboardGraphicsRAM
Intel Core i5-3570K Asus P8Z77-I Deluxe HD6450 Flex Crucial 16GB (2x 8GB) Ballistix Elite 
Hard DriveHard DriveOSMonitor
Samsung SSD 840 EVO 250GB TOSHIBA DT01ACA300 Arch Linux Dell UltraSharp U2713HM 
MonitorMonitorKeyboardPower
Dell U2410 Dell 2407WFP Cherry - Cherry Blue Switches (Unlabeled keys) Seasonic X-650 
CaseMouseAudioAudio
BitFenix Prodigy Black Logitech M570 Trackball Sennheiser HD595 Creative GigaWorks T20 
CPUMotherboardGraphicsRAM
Intel Core i5 3570K Zotac Z77-ITX WiFi EVGA 680 GTX Samsung 
Hard DriveHard DriveOSMonitor
Samsung 256GB 830 Samsung SpinPoint HD501LJ Windows 7 Dell U2410 
MonitorMonitorKeyboardCase
Dell 2407WFP Dell E248WFP Cherry Black (MX Blue Switches, Blank Keys) Silverstone Sugi SG08B 
MouseAudioAudio
Logitech Trackman Logitech Z-5500 Sennheiser HD595s 
CPUMotherboardRAMHard Drive
AMD Athlon II X2 240e Asus M5A78L-M/USB3 Crucial 8GB (2x4GB) DDR3 1600Mhz Ballistix Sport 1.5TB Hard Drives 
  hide details  
Reply
post #10 of 11
Thread Starter 
Quote:
Originally Posted by lattyware View Post
That's wrong. Those are CSS attributes, not HTML attributes. Look up the separation of style and content.
ya i found that out last night, it works, but i cant get it to image to center on the x and y axis and im stumped on how to code for universal size images
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Force img size in website