是否可以从响应图像路径的末端删除大小?

时间:2017-02-17 08:28:42

标签: javascript jquery html wordpress image

我想从图像中删除-500x500部分,以便显示实际图像。

enter image description here

如果有人想看一下,这是完整的HTML:

<div id="speakers_list1" class="wpb_row vc_row  mk-fullwidth-false  attched-false    vc_row-fluid  js-master-row  mk-in-viewport">


  <div style="" class="vc_col-sm-12 wpb_column column_container  _ height-full">

    <div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
      <ul>


        <li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
          <div class="item-holder">
            <div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
              <a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
                <img alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">

              </a>

              <div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>

            </div>

            <div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
              <a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
                <span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
              </a>
              <span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam &amp; Ustadz</span>
              <div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>


            </div>


          </div>

1 个答案:

答案 0 :(得分:1)

快速的方式(不漂亮)是替换元素的src

src是元素的属性,因此您可以使用$(obj).attr("src")获取值或使用$(obj).attr("src","newValue")

设置值

编辑我创建了一个函数,因此您可以使用多个对象多次执行此操作

要么为img添加一个类,要更改或通过属性调用它。

分类:fixImage($('.removeRatio'), "-500x500")
属性:fixImage($('[title="Imam Abdoulaye Ndaw"]'), "-500x500")

&#13;
&#13;
console.log("This was my SRC: " + $('.removeRatio').attr("src"))

function fixImage(obj, removestring)
{
obj.attr("src", obj.attr("src").replace(removestring, ""))
}

fixImage($('.removeRatio'), "-500x500")
console.log("This now IS my SRC: " + $('.removeRatio').attr("src"))
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="speakers_list1" class="wpb_row vc_row  mk-fullwidth-false  attched-false    vc_row-fluid  js-master-row  mk-in-viewport">


  <div style="" class="vc_col-sm-12 wpb_column column_container  _ height-full">

    <div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
      <ul>


        <li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
          <div class="item-holder">
            <div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
              <a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
                <img class="removeRatio" alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">

              </a>

              <div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>

            </div>

            <div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
              <a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
                <span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
              </a>
              <span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam &amp; Ustadz</span>
              <div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>


            </div>


          </div>
&#13;
&#13;
&#13;