Как растянуть картинку только по ширине?

[monia]

если с одной картинкой это надо проделать, то просто пропиши не в css а в самом коде

<img src="картинка" width="193" height="89">

а если много картинок, то в .css

width: 193px;
height: 89px;

 

[th7]

Для таких целей использую выравнивание картинок по центру... Может и Вам подойдет.
HTML код

<ul class="fixed cropcenterimg">
  <li class="cuad"><img src="http://www"/></li>  - квадратом
  <li class="vert"><img src="http://www"/></li> - центровка по ширине
  <li class="hor"><img src="http:/"/></li> - центровка по высоте
</ul>

Можно и в дивы все перенести по желанию
CSS код

Спойлер

ul, li{
  list-style:none;
  margin:0;
  padding:0;
}

img{
display:block;
  margin:0;
}

ul{
  overflow:hidden;
  display:block;
  li{
    display:block;
    float:left;
    margin-right:10px;
    overflow:hidden;
    text-align:center;
    border:3px solid #ccc;
  }
}

.hor{
  width:200px;
  height:140px;
}

.vert{
  width:160px;
  height:200px;
}

.cuad{
  width:200px;
  height:200px;
}

.resp{
  li{
  width:30%;
    height:200px;
  }
}

Java код

$(function() {
    CenterCropImage($('.cropcenterimg li'))
    $(window).resize(function(){
        CenterCropImage($('.cropcenterimg li'))
    })
})

function CenterCropImage(x){
    x.each(function(){
        $(this).children('img').load(function(){
            ContentBox=$(this).parent()
            PropBox=getProportions(ContentBox)

            ImgtoResize=$(this)
            PropImg=getProportions(ImgtoResize)
            if(PropBox>PropImg){
                ProportionVertical(ImgtoResize)
            }
            else{
                ProportionHorizontal(ImgtoResize)
            }    
        })
        ContentBox=$(this)
        PropBox=getProportions(ContentBox)

        ImgtoResize=$(this).children('img')
        PropImg=getProportions(ImgtoResize)
        if(PropBox>PropImg){
            ProportionVertical(ImgtoResize)
        }
        else{
            ProportionHorizontal(ImgtoResize)
        }
    })
}


function getProportions(x){
    Height=x.height()
    Width=x.width()
    Prop=Width/Height
    return Prop
}
function ProportionHorizontal(x){
    x.removeAttr("style")
    x.css({'height':'100%','width':'auto'})
    Wimg=x.width()
    Wcont=x.parent().width()

    MarginLeft=(Wcont-Wimg)/2
    x.css({'margin-left':MarginLeft})
}
function ProportionVertical(x){
    x.removeAttr("style")
    x.css({'width':'100%','height':'auto'})
    Himg=x.height()
    Hcont=x.parent().height()

    MarginTop=(Hcont-Himg)/2
    x.css({'margin-top':MarginTop})
}

 

[max1235]

img{ width: inherit; height: auto;}

 

[rrex]

из первого поста я понимаю, что размер должен быть 193 на 89 и при этом растягиваться по ширине, но обрезаться высота? если так, то используйте
overflow:hidden; обязательною если можно, покажите сайт, где это хотите реализовать, подскажу более предметно

 

[seraph22]

.span2 {
width: 193px;
}
.span2 img {
width: 193px;
height: auto;
}

 

[swordone]

width: 193px; height: 93px;

 

[omgh]

.img {
background: url('img.jpg') no-repeat;
background-size: auto 100%;
height: 89px;
width: 193px;
}